1、vue项目中 npm install echarts --save 安装echarts依赖
2、main.js中引入相关依赖
import echarts from 'echarts'
//注意:echarts3.0以后已经不包含地图文件了,需要手动引入china.js文件
import 'echarts/map/js/china'
//将echarts绑定到vue的原型上
Vue.prototype.$echarts = echarts
重点要说的是这里 import 'echarts/map/js/china'
这相当于引入的是\node_modules\echarts\map\js\china.js 是一样的
china.js 被执行 对应的地图china被注册了 就不用你在组件里面使用json数据, echarts.registerMap('china',data)再注册地图了
当然对应的json数据也能找到
这样以后你就再也不用网上找了 json文件或者js文件了 是不是很赞 好多人都不知道 我也是才知道根本不需要网上找对应的地图数据了
3、配置options,以及echarts的初始化函数
let option1 = {
tooltip: {},
visualMap: {
min: 0,
max: 1500,
left: 'left',
top: 'bottom',
text: ['High','Low'],
seriesIndex: [1],
inRange: {
color: ['blue','skyblue','red','yellow','pink','green']
},
calculable : true
},
geo: {
map: 'china',
roam: true,
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: 20,
symbol: 'none',
symbolRotate: 35,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F06C00'
}
}
},
{
name: 'categoryA',
type: 'map',
geoIndex: 0,
// tooltip: {show: false},
data:[
{name: '北京', value: '0'},
{name: '天津', value: '111'},
{name: '上海', value: '222'},
{name: '重庆', value: '333'},
{name: '河北', value: '444'},
{name: '河南', value: '555'},
{name: '云南', value: '666'},
{name: '辽宁', value: '777'},
{name: '黑龙江', value: '888'},
{name: '湖南', value: '999'},
{name: '安徽', value: '1111'},
{name: '山东', value: '1500'},
]
}
]
};
let myChart = that.$echarts.init( document.getElementById('mainData'))
myChart.setOption(option1);