声明：我的浙江省的geoJSON数据是下载到了本地
一、先下载地图有关的geoJSON数据
可以在datav.aliyun.com/portal/scho… 进行下载有关geoJSON数据；
二 、这里我以浙江省为例，完成整个echarts地图的制作；
1、首先下载echarts插件；
npm install echarts -S或cnpm install echarts -S
安装完成之后，我们就可以开始引入我们需要的echarts了，接下来介绍几种使用echarts的方式。
2、引入
全局引用：
首先在main.js中引入echarts，将其绑定到vue原型上：
- import echarts from 'echarts'
- Vue.prototype.$echarts = echarts;
接着，我们就可以在任何一个组件中使用echarts了，接下来我们在初始化项目中的helloWorld组件中使用echarts配置图标，具体如下：
<template>
<div>
<div style="width:500px;height:500px" ref="chart"></div>\
</div>
</template>
<script>
export default{
data () {
return {};
},
methods: {
initCharts () {
let myChart = this.$echarts.init(this.$refs.chart);
console.log(this.$refs.chart)
// 绘制图表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
},
mounted () {
this.initCharts();
}
}
</script>
这样下来，就可以在项目的任何地方使用echarts了。
局部使用：
当然，很多时候没必要在全局引入ecahrts，那么我们只在单个组件内使用即可，代码更加简单：
<template>
<div>
<div style="width:500px;height:500px" ref="chart"></div>
</div>
</template>
<script>
const echarts = require('echarts');
export default{
data () {
return {};
},
methods: {
initCharts () {
let myChart = echarts.init(this.$refs.chart);
// 绘制图表\
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
},
mounted () {
this.initCharts();
}
}
</script>
可以看到，我们直接在组件内引入echarts，接下来跟全局引入的使用一样。区别在于，这种方式如果你想在其他组件内用echarts，则必须重新引入了。 这里我使用的是局部引入的方式；
直接const echarts = require('echarts');
3、把geoJSON数据制作成自己想要的格式，并使用；
创建一个common文件夹
创建mapData.js文件
和echarts插件的引入一样
import geoJson from '../common/mapData.js'
const mapData = "这个地方就是你从上面那个网址下载下来的geoJSON数据"
export default {
mapData
}
4、创建一个制作echarts图的盒子
<div id="echart2" style="width:500px;height: 500px;"></div>
切记一定要设置宽高；
5、也是最重要的一步，就是写有关echarts有关的东西；
// 渲染echarts2的方法开始
echarts2 () {
var chartDom = document.getElementById('echart2');//这里放的“echarts2”就是你上方创建盒子的id
var myChart = echarts.init(chartDom);
var option;
myChart.showLoading();
//2、 这个geoJson数据可以自己在网上找相关的浙江省的数据，或者从后端的接口来调用数据
myChart.hideLoading();
//下面这个geoJSON就是上面通过import 引入的自己制作的mapData.js文件
echarts.registerMap('ZJ', geoJson.mapData);
myChart.setOption(option = {
//4、 这个是放到一小块地图上展示的内容，他是根据series中的data数组来决定的name:b，value:c（b: 表示名称，c: 表示值）
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (分)'
},
//6、 这个是根据data中的value值来相应的显示不同的颜色（在这里是根据人口密度来显示不同的颜色；）
visualMap: {
show: true,
x: 'left',
y: '58%',//可以设置左边提示的位置；
itemWidth: 12,
itemHeight: 12,
splitList: [
{ start: 0, end: 20, label: '轻微', color: '#29A4D7' }, { start: 20, end: 50, label: '一般', color: '#E6C249' },
{ start: 50, end: 60, label: '重点提示', color: '#DD970B' }, { start: 60, end: 80, label: '重大', color: '#5934EC' },
{ start: 80, end: 100, label: '重点关注', color: '#B52621' }
],
textStyle: {
color: '#fff' // 值域文字颜色
},
// color: ['#B52621', '#5934EC', '#DD970B', '#E6C249', '#29A4D7']
},
series: [
{
name: '浙江省地图',
type: 'map',
mapType: 'ZJ', // 自定义扩展图表类型
// 设置每一块中具体文字
label: {
normal: {
show: true,
formatter: function (params) {
return params.name + "\n" + params.value;
},
textStyle: {
fontWeight: 'normal',
fontSize: 12,
color: '#fff'
},
},
},
// 下面这个可以设置鼠标悬停上面的效果
emphasis: {//对应的鼠标悬浮效果
// show: true,
label: {
textStyle: { color: "#FFFFFF" },
},
itemStyle: {
areaColor: '#CCC'
}
},
itemStyle: {
//设置边框为白色
normal: {
borderWidth: 0.5,//边际线大小
borderColor: '#fff',//边界线颜色
},
},
data: [
{
name: '湖州市',
value: 87,
},
{
name: '嘉兴市',
value: 22,
},
{
name: '杭州市',
value: 65,
},
{
name: '绍兴市',
value: 43,
},
{
name: '舟山市',
value: 11,
},
{
name: '宁波市',
value: 54,
},
{
name: '金华市',
value: 33,
},
{
name: '台州市',
value: 56,
},
{
name: '丽水市',
value: 12,
},
{
name: '温州市',
value: 78,
},
{
name: '衢州市',
value: 43,
},
],
}
]
});
option && myChart.setOption(option);
//下面这个是做屏幕适配的
window.addEventListener("resize", function () {
myChart.resize();
// console.log('#2334434545')
})
},
// 渲染echrts2的方法结束
6、mounted里面做初始运行方法就行
this.echart2()
最终效果图：
