ECharts踩坑|中国地图

353 阅读1分钟

"ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目前暂时停止下载服务。"

1.安装ECharts,指定@4.9.0版本

npm install echarts@4.9.0

2.在main.js写入

import echarts from 'echarts'
import '../node_modules/echarts/map/js/china' //在node_modules中找到china.js并写入(重要!)
Vue.prototype.$echarts = echarts

3.创建一个有实际宽高的容器

<body>
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

4.然后初始化ECharts,同时配置相关项

var myChart = this.$echarts.init(document.getElementById(‘main’));
var option = {
    series: [{
        name: '省',
        type: 'map',
        map: 'china',
        roam: true,
        zoom: 1.2,
        aspectScale: 0.75,
        label: {
            normal: {
                show: true,
                textStyle: {
                    color: 'rgba(0,0,0,0.4)'
                }
            }
        },
        itemStyle: {
            normal: {
                areaColor: 'rgba(0,255,236,0.1)',
                borderColor: 'rgba(118,237,236,1)',
            },
            emphasis: {
                areaColor: 'rgba(118,237,236,0.8)',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
}
if (option && typeof option === "object") {
    myChart.setOption(option, true);
   };

最后效果:

image.png