第二次用echart，第一次做地图，

 

<template>   <div class="echarts" style="background:#3bafde">     <div :style="{height:'600px',width:'100%'}" ref="myEchart"></div>   </div> </template> <script>   import config from '@/config'   import echarts from "echarts";   import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据，   export default {     name: "echarts",     props: ["userJson"],     data() {       return {         chart: null,         dataIOS:[],           //两种类别数据定义         dataAndroid:[],       };     },     mounted() {         this.getBeforeDate()        //拿取数据     },     beforeDestroy() {       if (!this.chart) {         return;       }       this.chart.dispose();       this.chart = null;     },     methods: {         getBeforeDate(){         let params = {             token:sessionStorage.getItem('token'),             methodPost:false         }         this.axios(config.API + '/api/aply/statistics/totalInfo',{},params).then((res)=>{             // console.log(res)             if(res.data.code==1&&res.data.data.length!=0){                 let datas = res.data.data                 let dataIOS = []                 let dataAndroid = []                 datas.forEach(element => {                   let obj = {                     name:element.province.replace(/省/,''),     //map不识别'省'字                     value:parseInt(element.down_number),                   }                   if(element.phone_type==1) dataIOS.push(obj)                   if(element.phone_type==2) dataAndroid.push(obj)               });               let result = []               // console.log(this.addObjnum(dataIOS))               dataIOS = this.addObjnum(dataIOS)               dataAndroid = this.addObjnum(dataAndroid)               this.chinaConfigure(dataIOS,dataAndroid);     //传参并绘制echart             }         })       },       // 合并相同省份的某条数据方法,否则有多少条展示多少条       addObjnum(arr, result ) {            var result={};           for(let i=0;i<arr.length;i++){               if(result[arr[i].name]){                   result[arr[i].name]+=arr[i].value;               }else{                   result[arr[i].name]=arr[i].value;               }           }           var keyvalue=[];           for(var key in result){               keyvalue.push({name:key,value:result[key]})           }           return keyvalue         },       chinaConfigure(dataIOS,dataAndroid) {         let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置             window.onresize = myChart.resize;         console.log(dataIOS,dataAndroid) //确定编辑好的数据已经入echart画图的逻辑         let option = {                       //let一个option方便处理数据时拿取原数据             backgroundColor: 'transparent',             title : {               text: '下载量统计',               subtext: '',               x:'center'             },             tooltip : {               trigger: 'item',               //formatter()方法将合适的数据格式展示在划过的弹窗里               formatter:function(params){                               //定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面                 var res=params.name+'<br />';                 //定义一个变量来保存series数据系列                 var myseries=option.series;                 //循环遍历series数据系列                 for(var i=0;i<myseries.length;i++){                     // 在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res*显示                     for(var k=0;k<myseries[i].data.length;k++){                         //如果data数据中的name和地区名称一样                         if(myseries[i].data[k].name==params.name){                             //将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中                             res+=myseries[i].name+':'+myseries[i].data[k].value+'<br />';                         }                     }                 }                 return res;             }           },           dataRange: {               min: 0,               max: 2500,               x: 'left',               y: 'bottom',               text:['高','低'],           // 文本，默认为数值文本               calculable : true           },           toolbox: {               show : true,               orient : 'vertical',               x: 'right',               y: 'center',               feature : {                   mark : {show: true},                   dataView : {show: true, readOnly: false},                   restore : {show: true},                   saveAsImage : {show: true}               }           },           series : [               {                   name: 'ios',                   type: 'map',                   mapType: 'china',                   roam: true,                   scaleLimit: { //滚轮缩放的极限控制                     min: .7,                     max: 3                   },                   label: {                     normal: {                       show: true, // 是否显示对应地名                       textStyle: {                         color: 'rgba(0,0,0,0.9)'                       }                     }                   },                   itemStyle:{                       normal:{label:{show:true},borderColor: 'rgba(0, 0, 0, 0.2)'},//地图版块线条                       emphasis: {                       areaColor: null,                       shadowOffsetX: 0,                       shadowOffsetY: 0,                       shadowBlur: 20,                       borderWidth: 0,                       shadowColor: 'rgba(0, 0, 0, 0.5)'                     }                   },                   data:dataAndroid               },               {                   name: 'android',                   type: 'map',                   mapType: 'china',                   itemStyle:{                       normal:{label:{show:true}},                       emphasis:{label:{show:true}}                   },                   data:dataIOS               }           ]       };       myChart.setOption(option);       }     }   } </script> <style scoped> #myChart{   background: red;   width: 100%; } path{   fill: none;   stroke: #76BF8A; } svg{   width: 100%;   height: 300px; } </style>