Vue3.0 + Echarts 實現地區人口數量分布展示

需求:

按照人口數量密集度,顏色由淺到深展示

實現:

基於現有的Vue3.0+4.5.13Cli框架,安裝Echarts

npm install echarts@4.9.0 --save

安裝成功后,就可以直接使用了

<template>
  <div class="about">
    <div ref="chart" style="width: 1900px;height:800px;"></div>
  </div>
</template>
<script>
// 導入圖表
import echarts from 'echarts'
// 導入中國地圖
import 'echarts/map/js/china'
import { reactive,ref,onMounted } from 'vue'
export default {
  // 啟動函數
  setup(){
    const state = reactive({
      chart:ref()
    })

    const init = () => {
      if(state.chart){
        // 圖表的初始化
        let mycat = echarts.init(state.chart)
        const option = {
          title:{
            text:'vue3.0引入中國地圖(人口分布數量)',
            x:'center',
            textStyle: {
              color:'#9c0505'
            }
          },
          // 數據和類型
          series: [{
            type:'map',
            map:'china',
            label:{
              show: true,
              color:'red',
              fontSize:10
            },
            // 地圖大小倍數
            zoom:1.2,
            data:[
              {name:'北京',value:40000},
              {name:'山西',value:30000},
              {name:'內蒙古',value:5000},
              {name:'青海',value:7000},
              {name:'河北',value:25000},
              {name:'廣東',value:10000},
              {name:'黑龍江',value:40000},
              {name:'南海諸島',value:20000},
            ]
          }],
          visualMap:{
            min: 800,
            max: 50000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          }
        }
        // 指定數據項和數據顯示
        mycat.setOption(option);
      }
    }

    onMounted(() => {
      init();
    })

    return state
  }
}
</script>

效果

 

 最后將代碼封裝成組件,在展示時傳入數據調用即可

作者：彼岸舞

時間：2021\06\29

內容關於：VUE

本文屬於作者原創,未經允許,禁止轉發