vue使用echart（地图，弹窗展示多条数据，option定义）

第二次用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>