|
|
@@ -3169,7 +3169,8 @@ let app = new Vue({
|
|
|
return res
|
|
|
},
|
|
|
initProvinceChart () {
|
|
|
- var data = center5
|
|
|
+ var data = []
|
|
|
+ this.geoCoordMap = []
|
|
|
var moveLine = {
|
|
|
normal: [
|
|
|
{
|
|
|
@@ -3263,6 +3264,7 @@ let app = new Vue({
|
|
|
var name = v.properties.name
|
|
|
// 地区经纬度
|
|
|
this.geoCoordMap[name] = v.properties.centroid
|
|
|
+ data.push({ name: v.properties.name, value: v.properties.centroid[0], value2: v.properties.centroid[1] })
|
|
|
})
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
@@ -3496,20 +3498,102 @@ let app = new Vue({
|
|
|
},
|
|
|
initChinaChart () {
|
|
|
var data = []
|
|
|
+ this.geoCoordMap = []
|
|
|
+ // var moveLine = {
|
|
|
+ // normal: [
|
|
|
+ // {
|
|
|
+ // fromName: '太原市',
|
|
|
+ // toName: '吕梁市',
|
|
|
+ // coords: [
|
|
|
+ // [112.3352, 37.9413],
|
|
|
+ // [111.3574, 37.7325],
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // fromName: '太原市',
|
|
|
+ // toName: '忻州市',
|
|
|
+ // coords: [
|
|
|
+ // [112.3352, 37.9413],
|
|
|
+ // [112.4561, 38.8971],
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // fromName: '太原市',
|
|
|
+ // toName: '临汾市',
|
|
|
+ // coords: [
|
|
|
+ // [112.3352, 37.9413],
|
|
|
+ // [111.4783, 36.1615],
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // fromName: '太原市',
|
|
|
+ // toName: '阳泉市',
|
|
|
+ // coords: [
|
|
|
+ // [112.3352, 37.9413],
|
|
|
+ // [113.4778, 38.0951],
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // fromName: '太原市',
|
|
|
+ // toName: '晋中市',
|
|
|
+ // coords: [
|
|
|
+ // [112.3352, 37.9413],
|
|
|
+ // [112.7747, 37.37],
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // fromName: '太原市',
|
|
|
+ // toName: '运城市',
|
|
|
+ // coords: [
|
|
|
+ // [112.3352, 37.9413],
|
|
|
+ // [111.1487, 35.2002],
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // fromName: '太原市',
|
|
|
+ // toName: '大同市',
|
|
|
+ // coords: [
|
|
|
+ // [112.3352, 37.9413],
|
|
|
+ // [113.7854, 39.8035],
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // fromName: '太原市',
|
|
|
+ // toName: '晋城市',
|
|
|
+ // coords: [
|
|
|
+ // [112.3352, 37.9413],
|
|
|
+ // [112.7856, 35.6342],
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // fromName: '太原市',
|
|
|
+ // toName: '长治市',
|
|
|
+ // coords: [
|
|
|
+ // [112.3352, 37.9413],
|
|
|
+ // [112.8625, 36.4746],
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // fromName: '太原市',
|
|
|
+ // toName: '朔州市',
|
|
|
+ // coords: [
|
|
|
+ // [112.3352, 37.9413],
|
|
|
+ // [113.0713, 39.6991],
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // }
|
|
|
/*获取地图数据*/
|
|
|
this.mapChart = echarts.init(this.$refs['echarts-map'])
|
|
|
- echarts.registerMap('china', china)
|
|
|
- var mapFeatures = echarts.getMap('china').geoJson.features
|
|
|
+ echarts.registerMap('shanxi', china)
|
|
|
+ var mapFeatures = echarts.getMap('shanxi').geoJson.features
|
|
|
mapFeatures.forEach(v => {
|
|
|
// 地区名称
|
|
|
var name = v.properties.name
|
|
|
// 地区经纬度
|
|
|
- // this.geoCoordMap[name] = v.properties.centroid
|
|
|
this.geoCoordMap[name] = v.properties.cp
|
|
|
- data.push({ name: v.properties.name, value1: v.properties.cp[0], value2: v.properties.cp[1] })
|
|
|
+ data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] })
|
|
|
})
|
|
|
- // <p>当前阶段：<span>可论证阶段</span></p>
|
|
|
- // <p>时间节点：<span>2021.10-2022.10</span></p>
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
padding: 15,
|
|
|
@@ -3530,34 +3614,49 @@ let app = new Vue({
|
|
|
type: 'highlight',
|
|
|
name: params.name,
|
|
|
})
|
|
|
- if (params.componentSubType == 'lines') {
|
|
|
- return
|
|
|
- }
|
|
|
- if (params.componentSubType == 'scatter') {
|
|
|
- let tipHtml = `
|
|
|
- <div class="tooltip-cont">
|
|
|
- <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
|
|
|
- <p>总投资额：<span>${params.data.value[2]}亿</span></p>
|
|
|
- </div>`
|
|
|
- callback(ticket, tipHtml)
|
|
|
- return ''
|
|
|
- return tipHtml
|
|
|
- }
|
|
|
- if (params.componentSubType == 'map') {
|
|
|
- let tipHtml = `
|
|
|
- <div class="tooltip-cont">
|
|
|
- <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
|
|
|
- <p>总投资额：<span>${params.data.value}亿</span></p>
|
|
|
- </div>`
|
|
|
- callback(ticket, tipHtml)
|
|
|
- return tipHtml
|
|
|
- }
|
|
|
+ // if (params.componentSubType == 'lines') {
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // if (params.componentSubType == 'scatter') {
|
|
|
+ // let tipHtml = `
|
|
|
+ // <div class="tooltip-cont">
|
|
|
+ // <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
|
|
|
+ // <p>总投资额：<span>${params.data.value[2]}亿</span></p>
|
|
|
+ // </div>`
|
|
|
+ // callback(ticket, tipHtml)
|
|
|
+ // return tipHtml
|
|
|
+ // }
|
|
|
+ // if (params.componentSubType == 'map') {
|
|
|
+ // let tipHtml = `
|
|
|
+ // <div class="tooltip-cont">
|
|
|
+ // <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
|
|
|
+ // <p>总投资额：<span>${params.data.value}亿</span></p>
|
|
|
+ // </div>`
|
|
|
+ // callback(ticket, tipHtml)
|
|
|
+ // return tipHtml
|
|
|
+ // }
|
|
|
|
|
|
},
|
|
|
},
|
|
|
+ visualMap: {
|
|
|
+ show: false,
|
|
|
+ min: 0,
|
|
|
+ max: 300,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ text: ['高', '低'],
|
|
|
+ textStyle: {
|
|
|
+ color: '#f1f1f1'
|
|
|
+ },
|
|
|
+ realtime: false,
|
|
|
+ calculable: false,
|
|
|
+ inRange: {
|
|
|
+ color: ['lightskyblue', '#2754b7']
|
|
|
+ }
|
|
|
+ },
|
|
|
geo: {
|
|
|
show: true,
|
|
|
- map: 'china',
|
|
|
+ map: 'shanxi',
|
|
|
layoutCenter: ['50%', '50%'], //地图位置
|
|
|
layoutSize: '65%',
|
|
|
zoom: 1.5,
|
|
|
@@ -3572,14 +3671,13 @@ let app = new Vue({
|
|
|
roam: false,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- areaColor: '#70b0ea',
|
|
|
+ areaColor: '#1946a8',
|
|
|
shadowColor: '#1946a8',
|
|
|
borderWidth: 1, //设置外层边框
|
|
|
borderColor: '#1946a8',
|
|
|
- shadowOffsetX: 2,
|
|
|
- shadowOffsetY: 1,
|
|
|
- shadowBlur: 2,
|
|
|
-
|
|
|
+ shadowOffsetX: 5,
|
|
|
+ shadowOffsetY: 2,
|
|
|
+ shadowBlur: 1,
|
|
|
},
|
|
|
emphasis: {
|
|
|
areaColor: '#1946a8',
|
|
|
@@ -3613,12 +3711,105 @@ let app = new Vue({
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: 'rgba(0,0,0,0)',
|
|
|
+ color: '#000',
|
|
|
borderWidth: 2,
|
|
|
borderColor: '#fff',
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
+ {
|
|
|
+ type: 'map',
|
|
|
+ map: this.mapName,
|
|
|
+ geoIndex: 0,
|
|
|
+ aspectScale: 1.5, //长宽比
|
|
|
+ showLegendSymbol: true, // 存在legend时显示
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ roam: true,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ areaColor: '#031525',
|
|
|
+ borderColor: '#3B5077',
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: '#2B91B7',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ animation: false,
|
|
|
+ data: data,
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // name: '点',
|
|
|
+ // type: 'scatter',
|
|
|
+ // coordinateSystem: 'geo',
|
|
|
+ // zlevel: 6,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: 'Top 5',
|
|
|
+ // type: 'effectScatter',
|
|
|
+ // coordinateSystem: 'geo',
|
|
|
+ // data: this.convertData(
|
|
|
+ // data
|
|
|
+ // .sort(function (a, b) {
|
|
|
+ // return b.value - a.value
|
|
|
+ // })
|
|
|
+ // .slice(0, 5)
|
|
|
+ // ),
|
|
|
+ // symbolSize: function (val) {
|
|
|
+ // return 15
|
|
|
+ // },
|
|
|
+ // showEffectOn: 'render',
|
|
|
+ // rippleEffect: {
|
|
|
+ // brushType: 'stroke',
|
|
|
+ // },
|
|
|
+ // hoverAnimation: true,
|
|
|
+ // label: {
|
|
|
+ // normal: {
|
|
|
+ // formatter: '{b}',
|
|
|
+ // position: 'left',
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // color: 'yellow',
|
|
|
+ // shadowBlur: 10,
|
|
|
+ // shadowColor: 'yellow',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // zlevel: 1000,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: '线路',
|
|
|
+ // type: 'lines',
|
|
|
+ // zlevel: 2,
|
|
|
+ // effect: {
|
|
|
+ // show: true,
|
|
|
+ // period: 4, //箭头指向速度，值越小速度越快
|
|
|
+ // trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
|
|
|
+ // symbol: 'arrow', //箭头图标
|
|
|
+ // symbolSize: 5, //图标大小
|
|
|
+ // },
|
|
|
+ // lineStyle: {
|
|
|
+ // normal: {
|
|
|
+ // color: '#00FFFF',
|
|
|
+ // width: 1,
|
|
|
+ // type: 'dashed',
|
|
|
+ // opacity: 0.5, //尾迹线条透明度
|
|
|
+ // curveness: -0.3, //尾迹线条曲直度
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // data: moveLine.normal,
|
|
|
+ // },
|
|
|
],
|
|
|
}
|
|
|
let that = this
|
|
|
@@ -3632,8 +3823,8 @@ let app = new Vue({
|
|
|
})
|
|
|
tools.loopShowTooltip(this.mapChart, option, {
|
|
|
interval: 2000,
|
|
|
- loopSeries: true,
|
|
|
- })
|
|
|
+ loopSeries: false,
|
|
|
+ });
|
|
|
this.mapChart.setOption(option)
|
|
|
},
|
|
|
initChartC3 () {
|
zhbyyy