Echarts.js + Vue.js 實現 中國疫情地圖（1）

代碼——github上

項目展示： https://zuxian.github.io/chinamap/

Echarts.js官方文檔！！！

數據來源——新浪接口–josnp獲取

vue create chinamap

cd chinamap

npm install --save jsonp
npm install echarts --save

npm run serve

APP.vue

<template>
  <div id="app"> <ChinaMap msg="Welcome to Your Vue.js App"/> </div>
</template>

<script>
import ChinaMap from './components/mapchinacomp.vue'
export default {
  name: 'App',
  components: {  ChinaMap  }
}
</script>

mapchinacomp.vue

template

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

vue 引進 echarts

vue 引進 echarts

  import echarts from 'echarts'
  import 'echarts/map/js/china.js'
  import jsonp from 'jsonp'

註冊地圖

  const option = {
    title:{
      text:"cookie_fzx",
      link:"https://blog.csdn.net/image_fzx",
      subtext:"疫情期間找工作---work hard!!!!",
      sublink:"https://blog.csdn.net/image_fzx"
    },
// ----------   series：地圖數據可視化，添加data數據    ---------------------

    series:[{
      name:"確診人數",
      type:'map', // 告訴echarts 要去渲染的是一個地圖
      map:'china',// 告訴echarts  要去渲染中國地圖
      label:{    // 控制對應地區的漢字      
        show:true,
        color:'#333',// 控制地區名的字體顏色---黑色，省名字
        fontSize:10
      },
      itemStyle:{      // 地圖板塊的顏色和邊框---灰色，各個省界線
        areaColor:'#eee',
        // borderColor:'blue'
      },
      roam:true,
      zoom:1.2,// 控制地圖的放大和縮小
      emphasis:{    // 控制鼠標滑過之後的背景色和字體顏色--白色       
        label:{
          color:'#fff',
          fontSize:12
        },
        itemStyle:{
          areaColor:'#83b5e7'   //  滑動到哪個地區就顯示藍色
        }
      },
      data:[]    // 用來展示後臺給的數據的 {name:xx,value:xxx}
    }],

//-----------    visualMap：視覺映射，每個顏色代表什麼含義   -----------------------------
    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}
      ],
      // align:'right',// 默認left
      // orient:'horizontal' 默認豎直
      // left right 這些屬性控制 分段坐在的位置
      // showLabel:false
      // textStyle:{}
      inRange:{
        symbol:'rect',
        color:['#ffc0b1','#9c0505']   //   淺紅~~深紅色
      },
      itemWidth:20,
      itemHeight:10
    }],

//-------------------------------------------------------------------
    tooltip:{
      trigger:'item'
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        // dataView: {readOnly: false},
        // restore: {},
        saveAsImage: {}
      }
    },
  };

導出 export default

  export default {
    name: 'ChinaMap',
    mounted() {
      this.getData();// 爲什麼不再created
      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}))
            console.log(list);
            option.series[0].data = list;
            this.mychart.setOption(option);
            // 這行代碼能執行的前提是 DOM已經渲染完成，只有DOM渲染完成才能夠執行 echarts初始化
          }
        })
      }
    }
  }

樣式

<!-- 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>