使用Echart VUE实战开发-大数据疫情地图

<template>
  <div class="hello">
<!--    初始化echarts需要个有宽高的盒子-->
    <div ref="mapbox" style="height:600px;width:1000px"></div>
  </div>
</template>

<script>
  import echarts from \'echarts\'
  import \'echarts/map/js/china.js\'
  import jsonp from \'jsonp\'
  const option = {
     title :{
       text:\'lord\'
     },
     series: [{
         name:\'确诊人数\',
       type:\'map\',
       map:\'china\',

       label:{
         show:true,
         color:\'red\',
         fontSize:10
       },
      itemStyle:{  //控制地图板块的颜色和边框
        borderColor:\'blue\'
      },
      emphasis:{  //控制鼠标划过之后的高亮显示
         label:{
           color:\'#fff\',
           fontSize:12
         }
      },
      data:[],//用来请求后台数据
      zoom:1,  //控制地图的放大缩小
      roam:true,
    }],
    visualMap:[{
       type:\'piecewise\',
      show:true,
      // splitNumber:4
      pieces:[
        {min:10000},
        {min:1000,max:9999},
          {min:100,max:999},
          {min:10,max:99},
          {min:1,max:9}
      ],
      // inRange:{
      //    symbol:\'rect\',
      //   color:[\'blue\',\'red\'],
      // },
      itemWidth:20,
      itemHeight:10
      //showLabel:false
      // align:\'right\'
      // orient:\'horizontal\'
    }],
     tooltip:{
           trigger:\'item\'
     },
      toolbox:{
         show:true,
          orient:\'vertical\',
          left:\'right\',
          top:\'center\',
          feature:{
             dataView:{readOnly:false},
              saveAsImage:{},
              restore:{}
          }
      }

  }
export default {
  name: \'HelloWorld\',
  mounted() {
      this.getData();
    this.mychart = echarts.init(this.$refs.mapbox);
    this.mychart.setOption(option)
  },
  methods:{
    getData(){
       jsonp(\'https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427\',{},(err,data)=>{
           if(!err){
               console.log(data)
               let list = data.data.list.map(item=>({name:item.name,value:item.value}))
               option.series[0].data = list;
               this.mychart.setOption(option);  //这行代码能执行的前提是DOM执行渲染完成
           }
       })
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>