|
|
@@ -7,9 +7,12 @@ let app = new Vue({
|
|
|
totleLimit: '1363.88',
|
|
|
showTip2: false,
|
|
|
showTip3: false,
|
|
|
- list:'',
|
|
|
+ list: '',
|
|
|
count: 0,
|
|
|
countType: 0,
|
|
|
+ mapName: 'shanxi',
|
|
|
+ geoCoordMap: {},
|
|
|
+ storageRecordConfig2:[],
|
|
|
storageRecordConfig: {
|
|
|
// waitTime: '30000',
|
|
|
hoverPause: false,
|
|
|
@@ -17,11 +20,10 @@ let app = new Vue({
|
|
|
// headerBGC: '#05507b33',
|
|
|
// oddRowBGC: '#05507b33',
|
|
|
// evenRowBGC: '#05507b33',
|
|
|
- headerHeight:50,
|
|
|
+ headerHeight: 50,
|
|
|
headerBGC: '#05507b33',
|
|
|
- oddRowBGC: '#05183c',
|
|
|
- evenRowBGC: '#05507b00',
|
|
|
- rowNum: 5,
|
|
|
+ oddRowBGC: '#05507b33',
|
|
|
+ rowNum: 6,
|
|
|
// columnWidth: [100, 550,100],
|
|
|
align: ['center', 'center', 'center'],
|
|
|
data: [
|
|
|
@@ -73,6 +75,13 @@ let app = new Vue({
|
|
|
this.initChartL10()
|
|
|
this.initChartL11()
|
|
|
this.changeTopColor()
|
|
|
+ // 大屏二
|
|
|
+ this.initChartC1()
|
|
|
+ this.initChartC2()
|
|
|
+ this.initChartC3()
|
|
|
+ this.initChartC4()
|
|
|
+ this.initChinaChart()
|
|
|
+ this.initProjectList()
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -313,7 +322,7 @@ let app = new Vue({
|
|
|
verticalAlign: 'middle', // 纵向位置
|
|
|
layout: "vertical",//横排还是竖排
|
|
|
x: -30,
|
|
|
- y:50,
|
|
|
+ y: 50,
|
|
|
symbolWidth: 50,
|
|
|
itemStyle: {
|
|
|
fontSize: '20px',
|
|
|
@@ -327,9 +336,9 @@ let app = new Vue({
|
|
|
color: '#fff',
|
|
|
fontSize: 22,
|
|
|
},
|
|
|
- align:'center',
|
|
|
- verticalAlign:"bottom",
|
|
|
- x:-80
|
|
|
+ align: 'center',
|
|
|
+ verticalAlign: "bottom",
|
|
|
+ x: -80
|
|
|
},
|
|
|
tooltip: {
|
|
|
crosshairs: false,
|
|
|
@@ -591,7 +600,7 @@ let app = new Vue({
|
|
|
verticalAlign: 'middle', // 纵向位置
|
|
|
layout: "vertical",//横排还是竖排
|
|
|
x: -30,
|
|
|
- y:50,
|
|
|
+ y: 50,
|
|
|
symbolWidth: 50,
|
|
|
itemDistance: 50,
|
|
|
itemStyle: {
|
|
|
@@ -606,9 +615,9 @@ let app = new Vue({
|
|
|
color: '#fff',
|
|
|
fontSize: 22,
|
|
|
},
|
|
|
- align:'center',
|
|
|
- verticalAlign:"bottom",
|
|
|
- x:-120
|
|
|
+ align: 'center',
|
|
|
+ verticalAlign: "bottom",
|
|
|
+ x: -120
|
|
|
},
|
|
|
tooltip: {
|
|
|
crosshairs: true,
|
|
|
@@ -882,7 +891,7 @@ let app = new Vue({
|
|
|
// fontSize: "10",
|
|
|
},
|
|
|
right: 'center',
|
|
|
- y:5,
|
|
|
+ y: 5,
|
|
|
icon: "roundRect",
|
|
|
// 小图标的宽高
|
|
|
itemHeight: 5,
|
|
|
@@ -1018,7 +1027,7 @@ let app = new Vue({
|
|
|
verticalAlign: 'middle', // 纵向位置
|
|
|
layout: "vertical",//横排还是竖排
|
|
|
x: -30,
|
|
|
- y:50,
|
|
|
+ y: 50,
|
|
|
symbolWidth: 50,
|
|
|
itemDistance: 50,
|
|
|
itemStyle: {
|
|
|
@@ -1033,9 +1042,9 @@ let app = new Vue({
|
|
|
color: '#fff',
|
|
|
fontSize: 22,
|
|
|
},
|
|
|
- align:'center',
|
|
|
- verticalAlign:"bottom",
|
|
|
- x:-120
|
|
|
+ align: 'center',
|
|
|
+ verticalAlign: "bottom",
|
|
|
+ x: -120
|
|
|
},
|
|
|
tooltip: {
|
|
|
crosshairs: true,
|
|
|
@@ -1291,7 +1300,7 @@ let app = new Vue({
|
|
|
verticalAlign: 'middle', // 纵向位置
|
|
|
layout: "vertical",//横排还是竖排
|
|
|
x: -30,
|
|
|
- y:30,
|
|
|
+ y: 30,
|
|
|
symbolWidth: 50,
|
|
|
itemDistance: 50,
|
|
|
itemStyle: {
|
|
|
@@ -1306,9 +1315,9 @@ let app = new Vue({
|
|
|
color: '#fff',
|
|
|
fontSize: 22,
|
|
|
},
|
|
|
- align:'center',
|
|
|
- verticalAlign:"bottom",
|
|
|
- x:-120
|
|
|
+ align: 'center',
|
|
|
+ verticalAlign: "bottom",
|
|
|
+ x: -120
|
|
|
},
|
|
|
tooltip: {
|
|
|
crosshairs: true,
|
|
|
@@ -1560,9 +1569,9 @@ let app = new Vue({
|
|
|
color: '#fff',
|
|
|
fontSize: 22,
|
|
|
},
|
|
|
- align:'center',
|
|
|
- verticalAlign:"bottom",
|
|
|
- x:-120
|
|
|
+ align: 'center',
|
|
|
+ verticalAlign: "bottom",
|
|
|
+ x: -120
|
|
|
},
|
|
|
legend: {
|
|
|
// labelFormatter: function() {
|
|
|
@@ -1572,7 +1581,7 @@ let app = new Vue({
|
|
|
verticalAlign: 'middle', // 纵向位置
|
|
|
layout: "vertical",//横排还是竖排
|
|
|
x: -50,
|
|
|
- y:30,
|
|
|
+ y: 30,
|
|
|
symbolWidth: 50,
|
|
|
itemDistance: 50,
|
|
|
itemStyle: {
|
|
|
@@ -1818,9 +1827,9 @@ let app = new Vue({
|
|
|
color: '#fff',
|
|
|
fontSize: 22,
|
|
|
},
|
|
|
- align:'center',
|
|
|
- verticalAlign:"bottom",
|
|
|
- x:-120
|
|
|
+ align: 'center',
|
|
|
+ verticalAlign: "bottom",
|
|
|
+ x: -120
|
|
|
},
|
|
|
legend: {
|
|
|
// labelFormatter: function() {
|
|
|
@@ -1830,7 +1839,7 @@ let app = new Vue({
|
|
|
verticalAlign: 'middle', // 纵向位置
|
|
|
layout: "vertical",//横排还是竖排
|
|
|
x: -70,
|
|
|
- y:50,
|
|
|
+ y: 50,
|
|
|
symbolWidth: 50,
|
|
|
itemDistance: 50,
|
|
|
itemStyle: {
|
|
|
@@ -2429,5 +2438,1252 @@ let app = new Vue({
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
},
|
|
|
+ // 大屏二
|
|
|
+ initChartC1 () {
|
|
|
+ var chartData = []
|
|
|
+ var timer = null;
|
|
|
+ var timer2 = null;
|
|
|
+ var i = 0;
|
|
|
+ industryList.forEach((item, index) => {
|
|
|
+ let obj = {
|
|
|
+ name: item.name,
|
|
|
+ y: item.value,
|
|
|
+ sliced: false,
|
|
|
+ selected: false,
|
|
|
+ color: index == 0 ? 'rgb(243,178,119)' : index == 1 ? 'rgb(110,222,191)' : 'rgb(82,161,229)'
|
|
|
+ }
|
|
|
+ chartData.push(obj)
|
|
|
+ })
|
|
|
+ let that = this
|
|
|
+ var chart = Highcharts.chart('echartC1', {
|
|
|
+ chart: {
|
|
|
+ type: 'pie',
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ options3d: {
|
|
|
+ enabled: true,
|
|
|
+ alpha: 45,
|
|
|
+ //beta: 0
|
|
|
+ },
|
|
|
+ events: {
|
|
|
+ // load，图表加载完成时触发
|
|
|
+ load: function () {
|
|
|
+ var chart = this;
|
|
|
+
|
|
|
+ var points = chart.series[0].points;
|
|
|
+ var len = points.length;
|
|
|
+
|
|
|
+ timer && clearInterval(timer);
|
|
|
+ timer = setInterval(function () {
|
|
|
+ autoTooltip(points[i]);
|
|
|
+ chartData.forEach((item, index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ if (index == i) {
|
|
|
+ item.sliced = true
|
|
|
+ item.selected = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ chart.update({
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ click: function (e) {
|
|
|
+ if (e.point.name == '战略新兴产业') {
|
|
|
+ that.tipTitle2 = e.point.name
|
|
|
+ that.showTip2 = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ i++;
|
|
|
+ if (i === len) {
|
|
|
+ i = 0;
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
+ legendItemClick: function (event) {
|
|
|
+ console.log(event);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ credits: {
|
|
|
+ enabled: false //去掉hightchats水印
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: null
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ crosshairs: true,
|
|
|
+ backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
+ useHTML: false, //开启html模式
|
|
|
+ style: {
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ formatter: function (e) {
|
|
|
+ //console.log(this, e)
|
|
|
+ this.percentage = Math.round(this.percentage)
|
|
|
+ // e.options.backgroundColor = 'rgba(0,0,0,0.5)'
|
|
|
+ // e.options.style.color = '#fff'
|
|
|
+ return `${this.key}：<b>${this.percentage}%</b><br/>金额：<b>${this.y}</b>亿`
|
|
|
+ },
|
|
|
+ //pointFormat:
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ layout: 'vertical',
|
|
|
+ align: 'right',
|
|
|
+ verticalAlign: 'bottom',
|
|
|
+ itemStyle: {
|
|
|
+ fontSize: '20px',
|
|
|
+ color: '#fff',
|
|
|
+ x: 20
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ allowPointSelect: true,
|
|
|
+ showInLegend: true, // 图例
|
|
|
+ cursor: 'pointer',
|
|
|
+ size: 500,
|
|
|
+ innerSize: 300, //环形图中间空白，0为饼图
|
|
|
+ depth: 28, //立体高度
|
|
|
+ slicedOffset: 23, //动画距离
|
|
|
+ dataLabels: {
|
|
|
+ enabled: false, // 是否展示指示线
|
|
|
+ format: '{point.name}: {point.percentage}'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ center: ['70%', '50%'],
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ click: function (e) { //点击事件
|
|
|
+ //console.log(e)
|
|
|
+ if (e.point.name == '战略新兴产业') {
|
|
|
+ that.tipTitle2 = e.point.name
|
|
|
+ that.showTip2 = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
|
|
|
+ //console.log(e)
|
|
|
+ chartData.forEach((item, index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ })
|
|
|
+ chartData[e.target.index].sliced = true
|
|
|
+ chartData[e.target.index].selected = true
|
|
|
+ chart.update({
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ click: function (e) {
|
|
|
+ if (e.point.name == '战略新兴产业') {
|
|
|
+ that.tipTitle2 = e.point.name
|
|
|
+ that.showTip2 = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ timer && clearInterval(timer);
|
|
|
+ },
|
|
|
+ mouseOut: function () { // 鼠标移出后需要继续执行轮播
|
|
|
+ var points = chart.series[0].points;
|
|
|
+ var len = points.length;
|
|
|
+
|
|
|
+ timer && clearInterval(timer);
|
|
|
+ timer = setInterval(function () {
|
|
|
+ autoTooltip(points[i]);
|
|
|
+ chartData.forEach((item, index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ if (index == i) {
|
|
|
+ item.sliced = true
|
|
|
+ item.selected = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ chart.update({
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ point: {
|
|
|
+ events: {
|
|
|
+ click: function (e) {
|
|
|
+ if (e.point.name == '战略新兴产业') {
|
|
|
+ that.tipTitle2 = e.point.name
|
|
|
+ that.showTip2 = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ i++;
|
|
|
+ if (i === len) {
|
|
|
+ i = 0;
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ });
|
|
|
+
|
|
|
+ function autoTooltip (point) {
|
|
|
+ chart.tooltip.refresh(point);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initChartC2() {
|
|
|
+ let myChart = echarts.init(this.$refs['echartC2'])
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ formatter: data => {
|
|
|
+ return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿`
|
|
|
+ },
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ dataZoom:[
|
|
|
+ {
|
|
|
+ // start: 9,//默认为@
|
|
|
+ // end: 100,//黑认认为1@0
|
|
|
+ type: "slider",
|
|
|
+ show: false,
|
|
|
+ // xAxisIndex: [0]
|
|
|
+ handlesize: 0,//滑动条的 左右2个滑动条的大小
|
|
|
+ startValue: 5,// 初始显示值
|
|
|
+ endValue: 0,// 结束显示值
|
|
|
+ height: 10,//组件高度
|
|
|
+ left:"5%",
|
|
|
+ right: "4%",//右边的距离
|
|
|
+ bottom: "25%",//底边的距离
|
|
|
+ borderColor:"#939",
|
|
|
+ fillerColor:"#269cdb",
|
|
|
+ borderRadius: 5,
|
|
|
+ backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
|
|
|
+ showDataShadow: false,//是否显示数据阴影
|
|
|
+ showDetail: false,//即拖拽时候是否显示详细数值信息
|
|
|
+ truerealtime: true,//是否实时更新
|
|
|
+ filterMode: "filter"
|
|
|
+ },{
|
|
|
+ type:'inside',
|
|
|
+ show: true,
|
|
|
+ start: 1,
|
|
|
+ end: 100
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ right: '3%',
|
|
|
+ left: '7%',
|
|
|
+ bottom: '7%',
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '1',
|
|
|
+ right: '10',
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgba(250,250,250,0.6)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: executeList.map(item => item.name),
|
|
|
+ axisLine: {
|
|
|
+ show: true, //隐藏X轴轴线
|
|
|
+ lineStyle: {
|
|
|
+ color: '#005094',
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false, //隐藏X轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ rotate: 40,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '亿元',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: 'rgba(255,255,255,0.6)',
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#68b4dd66',
|
|
|
+ type: 'dashed',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#3D7495',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgba(250,250,250,0.6)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '计划投资',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 10,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#69c0ff',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#082550',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: executeList.map(item => item.value),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '实际投资',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 10,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#957DFF',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#082550',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: executeList.map(item => item.value2),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ tools.loopShowTooltip(myChart, option, {
|
|
|
+ nterval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ })
|
|
|
+ let arr = executeList.map(item => item.value2)
|
|
|
+ this.timeOut = setInterval(function () {
|
|
|
+
|
|
|
+ let startValue = myChart.getModel().option.dataZoom[0].startValue;
|
|
|
+ let endValue = myChart.getModel().option.dataZoom[0].endValue;
|
|
|
+ let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
|
|
|
+ let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
|
|
|
+ // 每次向后滚动一个，最后一个从头开始。
|
|
|
+ // console.log(option.dataZoom[0].endValue);
|
|
|
+
|
|
|
+ if (option.dataZoom[0].endValue >= 12) {
|
|
|
+ option.dataZoom[0].endValue = 5
|
|
|
+ option.dataZoom[0].startValue = 0
|
|
|
+ } else {
|
|
|
+ option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
|
|
|
+ option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
|
|
|
+ }
|
|
|
+
|
|
|
+ // myChart.dispatchAction({
|
|
|
+ // type: 'showTip',
|
|
|
+ // seriesIndex: 0,
|
|
|
+ // dataIndex: startValue +1,
|
|
|
+ // });
|
|
|
+ myChart.setOption(option);
|
|
|
+ }, 12000);
|
|
|
+
|
|
|
+ },
|
|
|
+ convertData(data) {
|
|
|
+ var res = []
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ var geoCoord = this.geoCoordMap[data[i].name]
|
|
|
+ if (geoCoord) {
|
|
|
+ res.push({
|
|
|
+ name: data[i].name,
|
|
|
+ value: geoCoord.concat(data[i].value),
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return res
|
|
|
+ },
|
|
|
+ initChinaChart() {
|
|
|
+ var data = [
|
|
|
+ { name: '大同市', value: 60.35, value2: 28 },
|
|
|
+ { name: '朔州市', value: 33.61, value2: 13 },
|
|
|
+ { name: '忻州市', value: 73.35, value2: 25 },
|
|
|
+ { name: '吕梁市', value: 109.04, value2: 45 },
|
|
|
+ { name: '太原市', value: 251.67, value2: 113 },
|
|
|
+ { name: '阳泉市', value: 25.12, value2: 28 },
|
|
|
+ { name: '晋中市', value: 148.57, value2: 52 },
|
|
|
+ { name: '临汾市', value: 130.55, value2: 30 },
|
|
|
+ { name: '长治市', value: 103.00, value2: 23 },
|
|
|
+ { name: '运城市', value: 41.06, value2: 23 },
|
|
|
+ { name: '晋城市', value: 45.43, value2: 31 }
|
|
|
+ ]
|
|
|
+
|
|
|
+ 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],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ /*获取地图数据*/
|
|
|
+ let myChart = echarts.init(this.$refs['echarts-map'])
|
|
|
+ echarts.registerMap('shanxi', {
|
|
|
+ type: 'FeatureCollection',
|
|
|
+ features: [
|
|
|
+ {
|
|
|
+ type: 'Feature',
|
|
|
+ id: '1409',
|
|
|
+ properties: { name: '忻州市', cp: [112.4561, 38.8971], childNum: 14 },
|
|
|
+ geometry: {
|
|
|
+ type: 'Polygon',
|
|
|
+ coordinates: [
|
|
|
+ '@@Vx@lnbn¦WlnnUm°²VVVVVnUnºlz@l@J@kXWVXl@La@KULlbnKlLnKLnKÆXn°bVV@bUVl°Un@LnaVJUbW@UX²l@ČwlVVIWnkÆa°anVKn°UW¯@aVUVk@Un@aV@ValwUanmWUk@WVUUanaVwnLVl°@nk@mVU@UVK@wLVKVU@K@UUKVUV@@bnLaVaôlIXmlKX_°KVV@bVV@zV`kblIVUlL@bnV@VĊllVlIXW@kaU²blKVnIlJalbXXlWVn°JnnL@l@XlJlaX@XW²@l_VmnKUblU@mnkVK¯@U@ma@kX¥VmakkLa@a@WIUUVXWWnk@a°a@kkm@kUUmJm@WUUUIk`m@VkaWWkXKmXk¯@WKLkak@±bw@aa@aka@ma¯@LKÇÅkKWbkmġ±ÅULUKVVkm¯LUVVbUwUW¯bmULxWJ@klmkUm@@KnwVkVK@akw@@a¯bKknVUIb¯mmbk@UbmKUL@xUU@klmLUlVXIVVVUVUU`mLXVWbXnW`Ų°xmxU@mĉwU@mbU@UmbkVW¦kJ@X@`¯Im@UlUVVnb@bWJXnmbJUUUUa@UamIkax@@x@b',
|
|
|
+ ],
|
|
|
+ encodeOffsets: [[113614, 39657]],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'Feature',
|
|
|
+ id: '1411',
|
|
|
+ properties: { name: '吕梁市', cp: [111.3574, 37.7325], childNum: 13 },
|
|
|
+ geometry: {
|
|
|
+ type: 'Polygon',
|
|
|
+ coordinates: [
|
|
|
+ '@@@a@w@wlbnJVb@VbVVVInaWmXI@aaUmVUVkn@°J@_W@lIX¥lUnaVV@naV@xĊnV@wn¯wƱX_WmXaWUnKV_VVUUUUWJkUVnKlk¯@@kmKUaűKkU@WmI@WUIlUUmVwXw@UlUVwV@LnbW@anU@UaVkô@l»n@naJnUÈLVaÆUUVmVKV²L@mU_lK@UVWkUa@a@U¯aUaÑóÑUbKk@@ak¯mVaUwVÑkWUmK@UUKmXUWÝwUaLUU@aWJUUU@UaÝU@WL@VKVaVI@WnU@alIVK@kImIkJ@m@@@_K@x@kaW@U@Vmn@UK@mIJUXV¤XXWlkKkkK@XmJVakImJU@ó¯LWKUV@nUVLkxmKkLma@kXKmmLabLmK@V@mXVÆUxX@`nLaV@@VmLUVnLlLb@°²nx@bVUxlb@V¯bUV@zVXVĊXVx@lVn@VnnmU@LlJXVz¯VWVXbV@bmnVUVkÇþÅ@XVxmbUlVUlnW@Xl@VLXÒ@bÞJ°¦Lò@nUb@°X@XbmVUVnb@xx',
|
|
|
+ ],
|
|
|
+ encodeOffsets: [[113614, 39657]],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'Feature',
|
|
|
+ id: '1410',
|
|
|
+ properties: { name: '临汾市', cp: [111.4783, 36.1615], childNum: 17 },
|
|
|
+ geometry: {
|
|
|
+ type: 'Polygon',
|
|
|
+ coordinates: [
|
|
|
+ '@@nW@@UnLKabKnnWL@lnblKnLlwKVU@mVUXL°KôV@nIlJUbnI@WlLllLXkWWU£VWInJ@VL@nm@UVX@lb@@wL@`@n@V@lw@nVmVXWmwnUla@_lKwVlUn°xVKVXXWlUVVI@K@Kn°KwlVlU@kna@V_WnmUVm@kXml_@mLlKXw°m@_ôJVUV@Xl@UaV@Va°Ilk»VwUkVmwUmmVn@V¯@KUwmK@U¯wUVÝ@mJUnWK@@UnKVa_lykUmKÛnm@x@UUlwVkXW@a@U@@K@kIVnammVakUl@wX@@k¯@VVbml@°UbULmlVbnbÅK±VKVXUJWa@ULWaUU@@U@aWK@UkxUKLUUUJ±UkL@V±kk@kam@UV@l@LWl@n@VVUxLlUUx@VUVU@aIUlL@°mLUbkUUaWUUaUU@aWKLWJ@bUL@VUVVbU@m@a@kmKmnĉlUKXWUblbxmIkU@xWb@lkVxLXmzVV@bklVVUzm@bk@Vx@xlU@lUbVnl@Wxnl@n@UbVmLmb@`X@lUX@@xlnkLWaUJnnWVVn@l@bULVV@lV@XnJVX',
|
|
|
+ ],
|
|
|
+ encodeOffsets: [[113063, 37784]],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'Feature',
|
|
|
+ id: '1407',
|
|
|
+ properties: { name: '晋中市', cp: [112.7747, 37.37], childNum: 11 },
|
|
|
+ geometry: {
|
|
|
+ type: 'Polygon',
|
|
|
+ coordinates: [
|
|
|
+ '@@@lInJlJ@ULkJ@bmV@XUJUbL@UXKV@ÞVbV@VVXI@bVVKVbÞxVXnWVL@VnLVlXÒUVxUb°nl@bl@LVaôÒÒVb°b@VnLnnV@lmn@lbUV@JUVVXkl@lUzmJ@xXklbUnJVUbnUlbV@nlLX@lakV`Ub°@XVJnUL²KlxnI@KV@lbUbVVKnVl@zlm@U@nI@WUaVl@@mVU@XkW@nkVKV_Vwy@knwVa@XalU@Vnml@X@VLKVaÞbnnlJImVKnVVVInVlU@m@mXK@UmyUI@mWUUakamw@wUwmLkakwVmKw@wUam£y@am_W@UU@knmmamU@WUa@knw@UUUUV@nJm@mVUkKVUUUkKmwKULKUImV@lUnnm@mbUK@°bUnmbUmkkWUb@am@UXkK@a±@V@ĉÅVUXVxUVkLWl¯@@bULUlm@@nm`XlWakIkmVUbUL@Vm@kI@@Km@VaXI@W@aU@kUVU_KbJkkÇb@nkKmLwÅW@kVUUVU@WUIJmIXmma@_kyVaUUlkUm@kUx¯Lm@L@LUJUkVWXUWUL¯wVmUkxkL@`bkmVnxXUWUnm@kxU@',
|
|
|
+ ],
|
|
|
+ encodeOffsets: [[114087, 37682]],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'Feature',
|
|
|
+ id: '1408',
|
|
|
+ properties: { name: '运城市', cp: [111.1487, 35.2002], childNum: 13 },
|
|
|
+ geometry: {
|
|
|
+ type: 'Polygon',
|
|
|
+ coordinates: [
|
|
|
+ '@@VlnJwkaVaXWVLĊknmnLl@@bnV@UaVU@UVK@aXIKXL@bVVVbXVVblVaVnK@¯KVkJ@bVVU@UVwkVKVwUUm@@Xk@K@kVUn@lbl@²l@UlK²VVIVVKVLlw@VXL@b@VV@VXbVK@XbVIUWLU²ÆLmaUankVKVa¯@nkUaU°@n@@kWaUVaXUW@IXKVw@UWU@W@@UUU@mn@`m@UUULkUmJIU@@UK@U@anak_@wmKUwmakVkmKVk¯bw`kwUIÇx¯»ÇaÅmn@@mmUkV@wkKW@kxmLUkĉLÝkxÝw¯lóVUmV@ĀVVX¦W¤kz@`Vx°²ĸ@Ul@xêĸNJ°¤VVlXLWnXxmV@nUl@',
|
|
|
+ ],
|
|
|
+ encodeOffsets: [[113232, 36597]],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'Feature',
|
|
|
+ id: '1402',
|
|
|
+ properties: { name: '大同市', cp: [113.7854, 39.8035], childNum: 8 },
|
|
|
+ geometry: {
|
|
|
+ type: 'Polygon',
|
|
|
+ coordinates: [
|
|
|
+ '@@²£yl@ČĖ@bĸĢbĸXaKŤnn@ŎôllÈxnVnÞÇV@bnXllL°KbVb@J@b@UxlKXLlKlXk@UlkJlkUVKXUÇVIVm@_nÇLalwVnU@UUwma@aaÝaLmUk@@W@U@@XwVWÝUUUk@@VmLKV»nwUwaUL@`mzJUIVUaUwKUaVIlJôanÑlLVUn@a@VV@@UUwVK°Vn_lJÆLéW@UUUÅ@»lm@aÞIVwXWUUkkm@U@aU@mwU£VWU_kWmXwW_°yUkkK@UÇK@kkUVymóKU@KWIbUak@mJ@bkbmLkUmkVUW¦@lnb@@V°ULml@nkVaVmLUnk`±@XWW@kbǦX¯WxI@xmbmxXlWV@bÅUz@Jb@bÞbU@Wbk@xk@WX¯VÛWÝbÝUkVUU@alI@a@akLWam@U¯UUmÇL@K@aU@¯VUkKmX@`@kJ@nVUb@lbVÆXVWULU`VbkLUV@XWl@bXJ@VbV@Vl',
|
|
|
+ ],
|
|
|
+ encodeOffsets: [[115335, 41209]],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'Feature',
|
|
|
+ id: '1404',
|
|
|
+ properties: { name: '长治市', cp: [112.8625, 36.4746], childNum: 12 },
|
|
|
+ geometry: {
|
|
|
+ type: 'Polygon',
|
|
|
+ coordinates: [
|
|
|
+ '@@UkLky@IJVa@mÞaWy@_W@_WXVlUVw@nw°K@mUVamVkU@mmmnLVUmKXaU@IlKVUnK@UmWkX@WV_V@akU@aKWIXyIUVmUnUa@WaXUVKVmkUWVkULU@@VbKbIUm@mbVLxWUUkn±V¯wbÅJUbmLkbmKÅKbVnUbVKUbKUbmLKmbaKkUm@UnnVnxUVlUxl¼k¯JUbU@Vbk@WU@UVóI@`¯nWxkLK@nk`Wn@lUnVnmXU`@mb@lkV@VnklVVUblz@`nbWnnJIVJ@XUVVUV@lÆXxnKlL@maÈllIaLV`UlVV@@b@XJWUb@n@L@lJn@@UVKVaUlnlJXbkWn_@mn@VkVK@a°@XklKVUUwVWUĊÆ@U²@@blLVWn@@bVaXllVnnaVma@¯VLnan@mVm@knUVJ',
|
|
|
+ ],
|
|
|
+ encodeOffsets: [[116269, 37637]],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'Feature',
|
|
|
+ id: '1406',
|
|
|
+ properties: { name: '朔州市', cp: [113.0713, 39.6991], childNum: 5 },
|
|
|
+ geometry: {
|
|
|
+ type: 'Polygon',
|
|
|
+ coordinates: [
|
|
|
+ '@@XXWVXVWnnlnn@èƼ@xlVnblVÈUVl@blnLÜĊmUkU@Ua@WI@aXk@WVUlKUaV_VKXWUUÅka@VaU@mlI@@_nWLVl°UV@@b@LÈKVn°V@VnXblK@b@bkJ@bVVlUÞVÞaXÜ°UXWl@wl@XaV@Ýa@aa@IVyÆ@aXUWknwna@wJXw°WÈ¥kI@W@kmKm¯IUmkXWWkabkImJUkL±aVb@lWXkJUkĉk@UmU@aKkVUkJlaU_y@UU@aUU¯LW`kLWnkJóbUbmK@aU@UVVL@VL@UVULK@xUL@VUV@nml¯@UkmKUxmbVbUV@XlXVmnVbkxUbU@bm@@VUlUVb°@VX¯m',
|
|
|
+ ],
|
|
|
+ encodeOffsets: [[114615, 40562]],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'Feature',
|
|
|
+ id: '1405',
|
|
|
+ properties: { name: '晋城市', cp: [112.7856, 35.6342], childNum: 6 },
|
|
|
+ geometry: {
|
|
|
+ type: 'Polygon',
|
|
|
+ coordinates: [
|
|
|
+ '@@lVLbanLnKVaLVaLUVaUmaÆLnLlanKVaÆIa°x²UlmVVXwUKna@VnJaLa@UV@@alUkKVKnkmmVwUkw@@kxWUXW@@mk@aUa@a¯aLkKmwkUm@kL@K@aWIXmVXWkUVakL@UVKw@aUK@UUKmLU@¯nKUwVUIWJUWmka@UXJk@UkmW@kLWKVx@bmI@VUaVU@a¯@UUmVKmX@±`kÝKVxUL±akL@VbLkKmV@XWVUbVXb@lm@@lW@@xklVUbnnmbUlJ@@L@@Vb@WXUlkxVV@wn@ÜmnLlVkz`UbmL@V@XLmVnIÞ@VU°x@VnLxV@LU°',
|
|
|
+ ],
|
|
|
+ encodeOffsets: [[115223, 36895]],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'Feature',
|
|
|
+ id: '1401',
|
|
|
+ properties: { name: '太原市', cp: [112.3352, 37.9413], childNum: 5 },
|
|
|
+ geometry: {
|
|
|
+ type: 'Polygon',
|
|
|
+ coordinates: [
|
|
|
+ '@@@VV@wVKnLVal@na°naVJUlmL°a@b@lx@bULUlmx@Ln@lVknl@XIwKVn°aVXVxUaVU°KnUlUVLKÆV²ĢlnXalLÈÆLKUaVkUanmWUa@WwkUWU¯y¯Ñ@anIl@@aVUmIymULUUVakaU@@LmJkw±LKmVUI@W¯VaU_lkbW@kK@mUkaVmVaUIVmalkW@wnIVy@klkWUUVI@UVkam@knU@mmmK@bblVUX@VkLV`@n±KUULUnVVÅUbÇKmVImbm@k¼ó@Ulb@VmV@bXmaK@UUxkVV@xWUxVnkVVJ@XnJ@XlV²LÆVbnL@l@°',
|
|
|
+ ],
|
|
|
+ encodeOffsets: [[114503, 39134]],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'Feature',
|
|
|
+ id: '1403',
|
|
|
+ properties: { name: '阳泉市', cp: [113.4778, 38.0951], childNum: 3 },
|
|
|
+ geometry: {
|
|
|
+ type: 'Polygon',
|
|
|
+ coordinates: [
|
|
|
+ '@@°@nb@lb@bbb@x²al@lbKXU@mkUWkkmUUVwV@XUW@naVklKXblKnLnLVanImaXKlLaV@U@KUKWalXK@£WKXUV@VUUUVW_V@W@@K@UIWmXUmULnJkImmÝaUbLK@UWk@mnU@kVWb@Ubmx@lzUx`UULml@XWl@UV@nk@UVb@XJm@@Vknyk@zJnUV@bk@mJ@b°Ò°zXVlVXx@bXVmnVbUlVb',
|
|
|
+ ],
|
|
|
+ encodeOffsets: [[115864, 39336]],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ UTF8Encoding: true,
|
|
|
+ })
|
|
|
+ var mapFeatures = echarts.getMap(this.mapName).geoJson.features
|
|
|
+ mapFeatures.forEach(v => {
|
|
|
+ // 地区名称
|
|
|
+ var name = v.properties.name
|
|
|
+ // 地区经纬度
|
|
|
+ this.geoCoordMap[name] = v.properties.cp
|
|
|
+ })
|
|
|
+ // <p>当前阶段：<span>可论证阶段</span></p>
|
|
|
+ // <p>时间节点：<span>2021.10-2022.10</span></p>
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ padding: 15,
|
|
|
+ enterable: true,
|
|
|
+ transitionDuration: 1,
|
|
|
+ formatter: (params, ticket, callback) => {
|
|
|
+ // 清空所有轮播
|
|
|
+ for (var k in this.geoCoordMap) {
|
|
|
+ myChart.dispatchAction({
|
|
|
+ // type: 'geoUnSelect',
|
|
|
+ type: 'downplay',
|
|
|
+ name: k,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 如果鼠标滑动到线线上面，则返回空
|
|
|
+ myChart.dispatchAction({
|
|
|
+ // type: 'geoSelect',
|
|
|
+ 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 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: 'shanxi',
|
|
|
+ layoutCenter: ['50%', '50%'], //地图位置
|
|
|
+ layoutSize: '100%',
|
|
|
+ zoom:1.5,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ roam: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ areaColor: '#1946a8',
|
|
|
+ shadowColor: '#1946a8',
|
|
|
+ borderWidth: 1, //设置外层边框
|
|
|
+ borderColor: '#1946a8',
|
|
|
+ shadowOffsetX: 10,
|
|
|
+ shadowOffsetY: 5,
|
|
|
+ shadowBlur: 2,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: '#1946a8',
|
|
|
+ borderColor: '#d4bc1d',
|
|
|
+ borderWidth: 2, //设置外层边框
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '散点',
|
|
|
+ type: 'scatter',
|
|
|
+ coordinateSystem: 'geo',
|
|
|
+ data: this.convertData(data),
|
|
|
+ symbolSize: function (val) {
|
|
|
+ return 10
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: '{b}',
|
|
|
+ position: [10, 10],
|
|
|
+ fontSize: 30,
|
|
|
+ fontWeight: 600,
|
|
|
+ fontStyle: 'italic',
|
|
|
+ color: '#fff',
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ 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
|
|
|
+ myChart.on('click', function (params) {
|
|
|
+ if (params.name == '太原市') {
|
|
|
+ that.showTip = true
|
|
|
+ }
|
|
|
+ // window.open('https://www.baidu.com')
|
|
|
+ })
|
|
|
+ tools.loopShowTooltip(myChart, option, {
|
|
|
+ interval: 2000,
|
|
|
+ loopSeries: false,
|
|
|
+ });
|
|
|
+ myChart.setOption(option)
|
|
|
+ },
|
|
|
+ initChartC3() {
|
|
|
+ let myChart = echarts.init(this.$refs['echartC3'])
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: '{a0}：{c0}' + '亿元', //+ '<br/>'+ '{a1}：{c1}' + '%',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '5%',
|
|
|
+ right: '3%',
|
|
|
+ left: '7%',
|
|
|
+ bottom: '10%',
|
|
|
+ },
|
|
|
+ // legend: {
|
|
|
+ // top: '1',
|
|
|
+ // textStyle: {
|
|
|
+ // color: 'rgba(250,250,250,0.6)',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ xAxis: {
|
|
|
+ data: statusList.map(item => item.name),
|
|
|
+ axisLine: {
|
|
|
+ show: true, //隐藏X轴轴线
|
|
|
+ lineStyle: {
|
|
|
+ color: '#005094',
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false, //隐藏X轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ rotate: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '亿元',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: 'rgba(255,255,255,0.6)',
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#68b4dd66',
|
|
|
+ type: 'dashed',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#3D7495',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgba(250,250,250,0.6)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ formatter: '{value} %',
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgba(250,250,250,0.6)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ name: '投资金额',
|
|
|
+ barWidth: 15,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#69c0ff',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#082550',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: statusList.map(item => item.value),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ tools.loopShowTooltip(myChart, option, {
|
|
|
+ nterval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ initChartC4() {
|
|
|
+ var chartData = []
|
|
|
+ var timer = null;
|
|
|
+ var timer2 = null;
|
|
|
+ var i = 0;
|
|
|
+
|
|
|
+ chartDateR2.forEach((item,index) => {
|
|
|
+ let obj = {
|
|
|
+ name: item.name,
|
|
|
+ y: item.value2,
|
|
|
+ num: item.value,
|
|
|
+ sliced: false,
|
|
|
+ selected: false,
|
|
|
+ color: index == 0 ? '#43ede3' : '#8ba2ff'
|
|
|
+ }
|
|
|
+ chartData.push(obj)
|
|
|
+
|
|
|
+ })
|
|
|
+ let that = this
|
|
|
+ var chart = Highcharts.chart('echartC4', {
|
|
|
+ chart: {
|
|
|
+ type: 'pie',
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ options3d: {
|
|
|
+ enabled: true,
|
|
|
+ alpha: 45,
|
|
|
+ //beta: 0
|
|
|
+ },
|
|
|
+ events: {
|
|
|
+ // load，图表加载完成时触发
|
|
|
+ load: function () {
|
|
|
+ var chart = this;
|
|
|
+
|
|
|
+ var points = chart.series[0].points;
|
|
|
+ var len = points.length;
|
|
|
+
|
|
|
+ timer && clearInterval(timer);
|
|
|
+ timer = setInterval(function () {
|
|
|
+ autoTooltip(points[i]);
|
|
|
+ chartData.forEach((item,index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ if(index == i){
|
|
|
+ item.sliced = true
|
|
|
+ item.selected = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ chart.update({
|
|
|
+ series:[{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ point: {
|
|
|
+ events:{
|
|
|
+ click:function(e){
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ i++;
|
|
|
+ if (i === len) {
|
|
|
+ i = 0;
|
|
|
+ chartData.forEach((item,index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ })
|
|
|
+ chart.update({
|
|
|
+ series:[{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ point: {
|
|
|
+ events:{
|
|
|
+ click:function(e){
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
+ legendItemClick : function(event) {
|
|
|
+ console.log(event);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ credits: {
|
|
|
+ enabled: false //去掉hightchats水印
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: null
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ crosshairs: true,
|
|
|
+ backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
+ // positioner: function(e){
|
|
|
+ // console.log(e, this)
|
|
|
+ // },
|
|
|
+ useHTML: false, //开启html模式
|
|
|
+ style: {
|
|
|
+ color:'#fff',
|
|
|
+ },
|
|
|
+ formatter: function(e){
|
|
|
+ //console.log(this)
|
|
|
+ let num = chartData[this.colorIndex].num
|
|
|
+ this.percentage = Math.round(this.percentage)
|
|
|
+ return `${this.key}：<b>${this.percentage}%</b><br/>投资完成额：<b>${this.y}</b>亿<br/>投资数量：<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //pointFormat:
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ layout: 'vertical',
|
|
|
+ align: 'right',
|
|
|
+ verticalAlign: 'bottom',
|
|
|
+ itemStyle: {
|
|
|
+ fontSize: '20px',
|
|
|
+ color: '#fff',
|
|
|
+ x: 20
|
|
|
+ }
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ allowPointSelect: true,
|
|
|
+ showInLegend: true, // 图例
|
|
|
+ cursor: 'pointer',
|
|
|
+ size: 500,
|
|
|
+ innerSize : 300, //环形图中间空白，0为饼图
|
|
|
+ depth: 28, //立体高度
|
|
|
+ slicedOffset: 23, //动画距离
|
|
|
+ dataLabels: {
|
|
|
+ enabled: false, // 是否展示指示线
|
|
|
+ format: '{point.name}: {point.percentage}'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ center: ['60%', '50%'],
|
|
|
+ point: {
|
|
|
+ events:{
|
|
|
+ click:function(e){ //点击事件
|
|
|
+ },
|
|
|
+ mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
|
|
|
+ //console.log(e)
|
|
|
+ chartData.forEach((item,index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ })
|
|
|
+ chartData[e.target.index].sliced = true
|
|
|
+ chartData[e.target.index].selected = true
|
|
|
+ chart.update({
|
|
|
+ series:[{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ point: {
|
|
|
+ events:{
|
|
|
+ click:function(e){
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ timer && clearInterval(timer);
|
|
|
+ },
|
|
|
+ mouseOut: function(){ // 鼠标移出后需要继续执行轮播
|
|
|
+ var points = chart.series[0].points;
|
|
|
+ var len = points.length;
|
|
|
+
|
|
|
+ timer && clearInterval(timer);
|
|
|
+ timer = setInterval(function () {
|
|
|
+ autoTooltip(points[i]);
|
|
|
+ chartData.forEach((item,index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ if(index == i){
|
|
|
+ item.sliced = true
|
|
|
+ item.selected = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ chart.update({
|
|
|
+ series:[{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ point: {
|
|
|
+ events:{
|
|
|
+ click:function(e){
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ i++;
|
|
|
+ if (i === len) {
|
|
|
+ i = 0;
|
|
|
+ chartData.forEach((item,index) => {
|
|
|
+ item.sliced = false
|
|
|
+ item.selected = false
|
|
|
+ })
|
|
|
+ chart.update({
|
|
|
+ series:[{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ point: {
|
|
|
+ events:{
|
|
|
+ click:function(e){
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ });
|
|
|
+
|
|
|
+ function autoTooltip(point) {
|
|
|
+ chart.tooltip.refresh(point);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initProjectList() {
|
|
|
+ let dataList = []
|
|
|
+ projectList.map(item => {
|
|
|
+ dataList.push([item.office,item.name, item.value + '亿'])
|
|
|
+ })
|
|
|
+ this.storageRecordConfig2 = {
|
|
|
+ header: ['企业集团', '项目名称', '投资金额'],
|
|
|
+ headerBGC: '#05507b33',
|
|
|
+ oddRowBGC: '#05507b33',
|
|
|
+ evenRowBGC: '',
|
|
|
+ headerHeight: '40',
|
|
|
+ rowNum: 6,
|
|
|
+ columnWidth: [100, 550,100],
|
|
|
+ align: ['center', 'center', 'center'],
|
|
|
+ data: dataList,
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
})
|
zhbyyy
