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

<template>
  <div class="hello">
<!--    初始化echarts需要个有宽高的盒子-->
    <div ref="mapbox" style="height:600px;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>