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>