echart 世界地图、中国地图

世界地图，封装组件
第一步，下载echarts

cnpm install echarts --save-dev

第二步，在main.js中全局引入

//引入echarts

import echarts from ‘echarts’
Vue.prototype.$echarts = echarts

<template>
    <div>
       <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart"></div>
    </div>
</template>
<script>
import echarts from 'echarts';
import  '../../node_modules/echarts/map/js/world.js'
import  '../../node_modules/echarts/map/js/china.js'
import { getCountry,getstate } from '@/api/user'
export default {
    name: "echarts",
    props: {
      className: {
        type: String,
        default: "yourClassName"
      },
      id: {
        type: String,
        default: "yourID"
      },
      width: {
        type: String,
        default: "100%"
      },
      height: {
        type: String,
        default: "862px"
      }
    },
    data() {
      return {
        title: "图表",
        placeholder: "用户名/电话",
        find: "2", //1显示新增按钮，2显示导入按钮，若不显示这两个按钮可以写0或者不写值
        chart: null,
        languageId:localStorage.getItem("key"),
        data:[],//存放请求过来的地图数据
        list:[],//拼接好放进去
        countryName:'', //国家名称
        office:'', //办公处
        park:'', //园区
        createCentry:'', //创建中心
        project:'' //项目
      };
    },
    components: {
    //   Title,
    //   Search
    },
    mounted() {
      // this.getCountry()
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
      getCountry(){
        getCountry(this.languageId).then(res => {
          if(res.code == '200'){
            for(var i=0; i<res.data.list.length; i++){
              this.countryName = res.data.list[i].countryName;
              this.office = res.data.list[i].office;
              this.park = res.data.list[i].park;
            //   this.createCentry = res.data.list[i].createCentry;
            //   this.project = res.data.list[i].project;
              //  this.countryName +  this.office + this.park + this.createCentry + this.project;
              this.data = {
                name:this.countryName,
                office:this.office,
                park:this.park,
                value:5
              }
              this.list.push(this.data)
            //   console.log(this.list)
            //   console.log("this.list")
            }
            
          }
          this.initChart();
          // if(this.list != ''){
          //     this.initChart();
          // }
        })
      },
      initChart() {
        var languageId = this.languageId
        this.chart = echarts.init(this.$refs.myEchart);
        window.onresize = echarts.init(this.$refs.myEchart).resize;
        var dataList=[
        //  {name:"南海诸岛",value:34},
        //  {name: '北京', value: 2},
        //  {name: '天津', value: 3000},
        //  {name: '上海', value: 11},
        //  {name: '黑龙江', value: 11}
         ]
        // 把配置和数据放这里
        this.chart.setOption({
         tooltip: {
            formatter:function(e){
            if (e.data) {
                return e.name+'<br />名称：'+e.data.office+'<br />电话：'+e.data.park
            }else{
                return
            }
            
                }
            },
            visualMap: {
                min: 0,
                max: 50,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],
                inRange: {
                    color: ['#e0ffff', '#006edd']
                },
                show:false
            },
            geo: {
                map: 'china',   // world 世界地图
                roam: false,
                zoom:1.23,
                label: {
                    normal: {
                        show: true,
                        fontSize:'10',
                        color: 'rgba(0,0,0,0.7)'
                    }
                },
                itemStyle: {
                    normal:{
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis:{
                        areaColor: '#F3B329',
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series : [
                {
                    name: '',
                    type: 'map',
                    geoIndex: 0,
                    data:this.list
                }
            ]
        });
      }
    }
}
</script>
<style lang="css">
.hidden11{
  display: none;
}
</style>