Vue中引入Echarts——复杂图形（地图篇）

前两篇文章介绍了如何在Vue中引入Echart的基础图形和样式调整
Vue中引入Echarts——基础图形(简单版)
Vue中引入Echarts——基础图形(进阶版)

本文介绍Echart中稍复杂一点的图形地图及样式。

在引入之前首先要提供一个网站
阿里云DataV-数据可视化平台
大家可以在这个网站中获取对应区域的json文件，下面介绍下具体使用过程
1、点击选择对应的区域
2、点中红圈中的复制按钮，或者是旁边的下载

3、放到下面的map.js文件中

import echart from 'echarts';

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        root.echarts = echart
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    }
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    if (!echarts.registerMap) {
        log('ECharts Map is not loaded')
        return;
    }
    echarts.registerMap('浙江省', 复制过来的整个放到这里);
}));

<template>
  <div>
  <div id="mapchart" style="width:100%;height:700px"></div>
  </div>
</template>

<script>
import echarts from 'echarts';
import '../assets/js/zhejiang';
export default {
    name:"mapChart",
    data(){
        return {
            option: {
                tooltip: {
                    trigger: 'item',
                    textAlign: 'center',
                    padding: 15,
                    borderColor: '#FFFFCC',
                    text: 'center',
                    showDelay: 0,
                    hideDelay: 0,
                    enterable: true,
                    transitionDuration: 0,
                    extraCssText: 'z-index:100',
                    formatter(params, ticket, callback) {
                    //根据业务自己拓展要显示的内容
                    var res = ''
                    var name = params.name
                    var population = params.data.population
                    if (name === '浙江省') {
                        params.value = count()
                    }
                    var value
                    if (isNaN(params.data.value)) {
                        value = params.data.value[2]
                    } else {
                        value = params.data.value
                    }
                    res = `<p style="text-align:center;font-size:18px">${name}</p><p>人口数: ${population}万</p>`
                    return res
                    }
                },
                // 地图
                geo: {
                    map: '浙江省', // 这个名字要和map.js中的保持一致
                    zoom: 1.2,
                    label: {
                    emphasis: {
                        show: false
                    }
                    },
                    roam: false, //是否允许缩放
                    silent: true,//移入取消选中色块
                    itemStyle: {
                    normal: {
                        color: '#C7E8FF',
                        borderColor: '#73BDDC', //省市边界线00fcff 516a89
                        borderWidth: 1
                    },
                    }
                },
                series: {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    symbolSize: 6,
                    zlevel: 2,
                    // 坐标名称
                    label: {
                    normal: {
                        show: false,
                        position: 'bottom', //显示位置
                        offset: [5, 0], //偏移设置
                        formatter(params) {
                        //圆环显示文字
                        return params.data.name
                        },
                        fontSize: 15,
                        color: '#000'
                    },
                    emphasis: {
                        show: false
                    }
                    },
                    // 标点颜色
                    itemStyle: {
                    normal: {
                        show: false,
                        color: '#F68B0e',

                    }
                    },
                    // 标点坐标
                    data: [
                      {
                        name: '杭州市',
                        value: [120.21436,30.253581],
                        population: 1193.6,
                      },
                      {
                        name: '宁波市',
                        value: [121.631994,29.86657],
                        population: 940.4,
                      },
                      {
                        name: '温州市',
                        value: [120.707054,28.000065],
                        population: 958.7,
                      },
                      {
                        name: '嘉兴市',
                        value: [120.764124,30.750477],
                        population: 541.1,
                      },
                      {
                        name: '湖州市',
                        value: [120.093943,30.89946],
                        population: 337.2,
                      },
                      {
                        name: '绍兴市',
                        value: [120.590598,30.057158],
                        population: 529.1,
                      },
                      {
                        name: '金华市',
                        value: [119.654016,29.08464],
                        population: 706.2,
                      },
                      {
                        name: '衢州市',
                        value: [118.868322,28.974535],
                        population: 227.8,
                      },
                      {
                        name: '舟山市',
                        value: [122.217869,29.988784],
                        population: 115.9,
                      },
                      {
                        name: '台州市',
                        value: [121.427432,28.665236],
                        population: 662.7,
                      },
                      {
                        name: '丽水市',
                        value: [119.931296,28.47277],
                        population: 250.8,
                      },
                    ]
                }
            }
        }
    },
    methods:{
        init () {
            const myChart = echarts.init(document.getElementById('mapchart'));
            myChart.setOption(this.option)
        }
    },
    mounted(){
        this.init();
    },

}
</script>

<style>

</style>

效果图：