vue使用echarts画省份地图

vue中使用echarts画省份地图

1.安装echarts

npm install echarts --save

2.引入echarts

// 在main.js中引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

3. 示例

<template>
 <div class="maps-container">
   <div id="main" style="width:100%; height:100%"></div>
 </div>
</template>
<script>
import "echarts/map/js/province/yunnan.js";
import obj from "echarts/map/json/province/yunnan.json";
export default {
 data() {
   return {
     listArr: [], //城市json
     max: "", //最大value值
     min: "" // 最小value值
   };
 },
 created() {
   this.getData();
 },
 mounted() {
   this.DrawMap();
 },
 methods: {
   getData() {
     // 获取城市名称数据
     console.log("取到的云南省的json数据", obj);
     if (obj) {
       let arr = obj.features;
       // 循环取出 城市名称和value值
       for (var j = 0; j < arr.length; j++) {
         this.max = arr[0].id;
         this.min = arr[0].id;
         if (arr[j].id > this.max) {
           this.max = arr[j].id;
         }
         if (arr[j].id < this.min) {
           this.min = arr[j].id;
         }
         this.listArr.push({
           name: arr[j].properties.name,
           value: arr[j].id
         });
       }
     }
   },
   DrawMap() {
     let _this = this;
     let myChart8 = this.$echarts.init(document.getElementById("main"));
     console.log(
       "最大value值",
       this.max,
       "\n",
       "最小value值",
       this.min,
       "\n",
       "城市数据",
       this.listArr
     );
     myChart8.setOption({
       visualMap: {
         min: _this.min,
         max: _this.max,
         show: false,
         inRange: {
           color: ["lightskyblue", "yellow", "orangered"]
         }
       },
       series: [
         {
           type: "map",
           map: "云南",
           itemStyle: {
             normal: { label: { show: true } },
             emphasis: { label: { show: true } },
             emphasis: {
               areaColor: "#67C23A" //鼠标进入时的颜色
             }
           },
           data: _this.listArr
         }
       ]
     });
   }
 }
};
</script>
<style scoped lang="scss">
.maps-container {
 width: 100%;
 height: 100%;
}
</style>

yunan.png