**准备工作:**
1.首先使用vue-cli的脚手架生成vue项目。
2.然后使用npm安装echarts
npm install echarts -S
3.安装完后再mian.js中挂载到vue的实例上使用,当然你也可以哪里需要在再哪里引入
引入:
import echarts from 'echarts' // e-charts
挂载:
Vue.prototype.$echarts = echarts
**开始使用**
这里我是直接写在当前文件夹中,并没有封装在公共组件中,下一篇在接着讲怎么把echarts封装成组件
1.需要把视图装着的容器 <div id="main style="width: 100%;height:800px;"></div>
2.把echarts的逻辑代码写在methods:{}中,然后在调用这个方法
mounted () {
this.mapChart()
},
3.方法编写:直接上代码
methods: {
mapChart () {
var myMapChart = this.$echarts.init(document.getElementById('main'))
// 34个省、市、自治区的名字拼音映射数组
var provinces = {
// 23个省
台湾: 'taiwan',
河北: 'hebei',
山西: 'shanxi',
辽宁: 'liaoning',
吉林: 'jilin',
黑龙江: 'heilongjiang',
江苏: 'jiangsu',
浙江: 'zhejiang',
安徽: 'anhui',
福建: 'fujian',
江西: 'jiangxi',
山东: 'shandong',
河南: 'henan',
湖北: 'hubei',
湖南: 'hunan',
广东: 'guangdong',
海南: 'hainan',
四川: 'sichuan',
贵州: 'guizhou',
云南: 'yunnan',
陕西: 'shanxi1',
甘肃: 'gansu',
青海: 'qinghai',
// 5个自治区
新疆: 'xinjiang',
广西: 'guangxi',
内蒙古: 'neimenggu',
宁夏: 'ningxia',
西藏: 'xizang',
// 4个直辖市
北京: 'beijing',
天津: 'tianjin',
上海: 'shanghai',
重庆: 'chongqing',
// 2个特别行政区
香港: 'xianggang',
澳门: 'aomen'
}
var cityMap = {
北京市: '110100',
天津市: '120100',
上海市: '310100',
重庆市: '500100',
崇明县: '310200',
湖北省直辖县市: '429000',
铜仁市: '522200',
毕节市: '522400',
石家庄市: '130100',
唐山市: '130200',
秦皇岛市: '130300',
邯郸市: '130400',
邢台市: '130500',
保定市: '130600',
张家口市: '130700',
承德市: '130800',
沧州市: '130900',
廊坊市: '131000',
衡水市: '131100',
太原市: '140100',
大同市: '140200',
阳泉市: '140300',
长治市: '140400',
晋城市: '140500',
朔州市: '140600',
晋中市: '140700',
运城市: '140800',
忻州市: '140900',
临汾市: '141000',
吕梁市: '141100',
呼和浩特市: '150100',
包头市: '150200',
乌海市: '150300',
赤峰市: '150400',
通辽市: '150500',
鄂尔多斯市: '150600',
呼伦贝尔市: '150700',
巴彦淖尔市: '150800',
乌兰察布市: '150900',
兴安盟: '152200',
锡林郭勒盟: '152500',
阿拉善盟: '152900',
沈阳市: '210100',
大连市: '210200',
鞍山市: '210300',
抚顺市: '210400',
本溪市: '210500',
丹东市: '210600',
锦州市: '210700',
营口市: '210800',
阜新市: '210900',
辽阳市: '211000',
盘锦市: '211100',
铁岭市: '211200',
朝阳市: '211300',
葫芦岛市: '211400',
长春市: '220100',
吉林市: '220200',
四平市: '220300',
辽源市: '220400',
通化市: '220500',
白山市: '220600',
松原市: '220700',
白城市: '220800',
延边朝鲜族自治州: '222400',
哈尔滨市: '230100',
齐齐哈尔市: '230200',
鸡西市: '230300',
鹤岗市: '230400',
双鸭山市: '230500',
大庆市: '230600',
伊春市: '230700',
佳木斯市: '230800',
七台河市: '230900',
牡丹江市: '231000',
黑河市: '231100',
绥化市: '231200',
大兴安岭地区: '232700',
南京市: '320100',
无锡市: '320200',
徐州市: '320300',
常州市: '320400',
苏州市: '320500',
南通市: '320600',
连云港市: '320700',
淮安市: '320800',
盐城市: '320900',
扬州市: '321000',
镇江市: '321100',
泰州市: '321200',
宿迁市: '321300',
杭州市: '330100',
宁波市: '330200',
温州市: '330300',
嘉兴市: '330400',
湖州市: '330500',
绍兴市: '330600',
金华市: '330700',
衢州市: '330800',
舟山市: '330900',
台州市: '331000',
丽水市: '331100',
合肥市: '340100',
芜湖市: '340200',
蚌埠市: '340300',
淮南市: '340400',
马鞍山市: '340500',
淮北市: '340600',
铜陵市: '340700',
安庆市: '340800',
黄山市: '341000',
滁州市: '341100',
阜阳市: '341200',
宿州市: '341300',
六安市: '341500',
亳州市: '341600',
池州市: '341700',
宣城市: '341800',
福州市: '350100',
厦门市: '350200',
莆田市: '350300',
三明市: '350400',
泉州市: '350500',
漳州市: '350600',
南平市: '350700',
龙岩市: '350800',
宁德市: '350900',
南昌市: '360100',
景德镇市: '360200',
萍乡市: '360300',
九江市: '360400',
新余市: '360500',
鹰潭市: '360600',
赣州市: '360700',
吉安市: '360800',
宜春市: '360900',
抚州市: '361000',
上饶市: '361100',
济南市: '370100',
青岛市: '370200',
淄博市: '370300',
枣庄市: '370400',
东营市: '370500',
烟台市: '370600',
潍坊市: '370700',
济宁市: '370800',
泰安市: '370900',
威海市: '371000',
日照市: '371100',
莱芜市: '371200',
临沂市: '371300',
德州市: '371400',
聊城市: '371500',
滨州市: '371600',
菏泽市: '371700',
郑州市: '410100',
开封市: '410200',
洛阳市: '410300',
平顶山市: '410400',
安阳市: '410500',
鹤壁市: '410600',
新乡市: '410700',
焦作市: '410800',
濮阳市: '410900',
许昌市: '411000',
漯河市: '411100',
三门峡市: '411200',
南阳市: '411300',
商丘市: '411400',
信阳市: '411500',
周口市: '411600',
驻马店市: '411700',
省直辖县级行政区划: '469000',
武汉市: '420100',
黄石市: '420200',
十堰市: '420300',
宜昌市: '420500',
襄阳市: '420600',
鄂州市: '420700',
荆门市: '420800',
孝感市: '420900',
荆州市: '421000',
黄冈市: '421100',
咸宁市: '421200',
随州市: '421300',
恩施土家族苗族自治州: '422800',
长沙市: '430100',
株洲市: '430200',
湘潭市: '430300',
衡阳市: '430400',
邵阳市: '430500',
岳阳市: '430600',
常德市: '430700',
张家界市: '430800',
益阳市: '430900',
郴州市: '431000',
永州市: '431100',
怀化市: '431200',
娄底市: '431300',
湘西土家族苗族自治州: '433100',
广州市: '440100',
韶关市: '440200',
深圳市: '440300',
珠海市: '440400',
汕头市: '440500',
佛山市: '440600',
江门市: '440700',
湛江市: '440800',
茂名市: '440900',
肇庆市: '441200',
惠州市: '441300',
梅州市: '441400',
汕尾市: '441500',
河源市: '441600',
阳江市: '441700',
清远市: '441800',
东莞市: '441900',
中山市: '442000',
潮州市: '445100',
揭阳市: '445200',
云浮市: '445300',
南宁市: '450100',
柳州市: '450200',
桂林市: '450300',
梧州市: '450400',
北海市: '450500',
防城港市: '450600',
钦州市: '450700',
贵港市: '450800',
玉林市: '450900',
百色市: '451000',
贺州市: '451100',
河池市: '451200',
来宾市: '451300',
崇左市: '451400',
海口市: '460100',
三亚市: '460200',
三沙市: '460300',
成都市: '510100',
自贡市: '510300',
攀枝花市: '510400',
泸州市: '510500',
德阳市: '510600',
绵阳市: '510700',
广元市: '510800',
遂宁市: '510900',
内江市: '511000',
乐山市: '511100',
南充市: '511300',
眉山市: '511400',
宜宾市: '511500',
广安市: '511600',
达州市: '511700',
雅安市: '511800',
巴中市: '511900',
资阳市: '512000',
阿坝藏族羌族自治州: '513200',
甘孜藏族自治州: '513300',
凉山彝族自治州: '513400',
贵阳市: '520100',
六盘水市: '520200',
遵义市: '520300',
安顺市: '520400',
黔西南布依族苗族自治州: '522300',
黔东南苗族侗族自治州: '522600',
黔南布依族苗族自治州: '522700',
昆明市: '530100',
曲靖市: '530300',
玉溪市: '530400',
保山市: '530500',
昭通市: '530600',
丽江市: '530700',
普洱市: '530800',
临沧市: '530900',
楚雄彝族自治州: '532300',
红河哈尼族彝族自治州: '532500',
文山壮族苗族自治州: '532600',
西双版纳傣族自治州: '532800',
大理白族自治州: '532900',
德宏傣族景颇族自治州: '533100',
怒江傈僳族自治州: '533300',
迪庆藏族自治州: '533400',
拉萨市: '540100',
昌都地区: '542100',
山南地区: '542200',
日喀则地区: '542300',
那曲地区: '542400',
阿里地区: '542500',
林芝地区: '542600',
西安市: '610100',
铜川市: '610200',
宝鸡市: '610300',
咸阳市: '610400',
渭南市: '610500',
延安市: '610600',
汉中市: '610700',
榆林市: '610800',
安康市: '610900',
商洛市: '611000',
兰州市: '620100',
嘉峪关市: '620200',
金昌市: '620300',
白银市: '620400',
天水市: '620500',
武威市: '620600',
张掖市: '620700',
平凉市: '620800',
酒泉市: '620900',
庆阳市: '621000',
定西市: '621100',
陇南市: '621200',
临夏回族自治州: '622900',
甘南藏族自治州: '623000',
西宁市: '630100',
海东地区: '632100',
海北藏族自治州: '632200',
黄南藏族自治州: '632300',
海南藏族自治州: '632500',
果洛藏族自治州: '632600',
玉树藏族自治州: '632700',
海西蒙古族藏族自治州: '632800',
银川市: '640100',
石嘴山市: '640200',
吴忠市: '640300',
固原市: '640400',
中卫市: '640500',
乌鲁木齐市: '650100',
克拉玛依市: '650200',
吐鲁番地区: '652100',
哈密地区: '652200',
昌吉回族自治州: '652300',
博尔塔拉蒙古自治州: '652700',
巴音郭楞蒙古自治州: '652800',
阿克苏地区: '652900',
克孜勒苏柯尔克孜自治州: '653000',
喀什地区: '653100',
和田地区: '653200',
伊犁哈萨克自治州: '654000',
塔城地区: '654200',
阿勒泰地区: '654300',
自治区直辖县级行政区划: '659000',
台湾省: '710000',
香港特别行政区: '810100',
澳门特别行政区: '820000'
}
// 直辖市和特别行政区-只有二级地图，没有三级地图
var special = ['北京', '天津', '上海', '重庆', '香港', '澳门']
var mapdata = []
var _that = this
// 这是组件开始初始化时需要拉去的数据--中国地图的数据
$.getJSON('static/map/china.json', function (data) {
let d = []
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name
})
}
mapdata = d
// 注册地图
_that.$echarts.registerMap('china', data)
// 绘制地图
renderMap('china', d)
})
myMapChart.on('click', function (params) {
if (params.name in provinces) {
// 如果点击的是34个省、市、自治区，绘制选中地区的二级地图
$.getJSON(
'static/map/province/' + provinces[params.name] + '.json',
function (data) {
_that.$echarts.registerMap(params.name, data)
var d = []
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name
})
}
renderMap(params.name, d)
}
)
} else if (params.seriesName in provinces) {
// 如果是【直辖市/特别行政区】只有二级下钻
if (special.indexOf(params.seriesName) >= 0) {
renderMap('china', mapdata)
} else {
// 显示县级地图
$.getJSON(
'static/map/city/' + cityMap[params.name] + '.json',
function (data) {
_that.$echarts.registerMap(params.name, data)
var d = []
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name
})
}
renderMap(params.name, d)
}
)
}
} else {
// 点击县级时是否返回
renderMap('china', mapdata)
}
})
// 初始化绘制全国地图配置
var option = {
backgroundColor: '#404a59',
title: {
text: 'Echarts3 中国地图下钻至县级',
subtext: '三级下钻',
left: 'center',
textStyle: {
color: '#fff',
fontSize: 16,
fontWeight: 'normal',
fontFamily: 'Microsoft YaHei'
},
subtextStyle: {
color: '#ccc',
fontSize: 13,
fontWeight: 'normal',
fontFamily: 'Microsoft YaHei'
}
},
tooltip: {
trigger: 'item',
formatter: '{b}'
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
},
iconStyle: {
normal: {
color: '#fff'
}
}
},
animationDuration: 1000,
animationEasing: 'cubicOut',
animationDurationUpdate: 1000
}
function renderMap (map, data) {
// 初始化绘制全国地图配置
console.log(map)
option.title.subtext = map
option.series = [
{
name: map,
type: 'map',
mapType: map,
roam: false,
data: data,
// data: convertedData[0],
nameMap: {
china: '中国'
},
label: {
normal: {
show: true,
textStyle: {
color: '#999',
fontSize: 13
}
},
emphasis: {
show: true,
textStyle: {
color: '#fff',
fontSize: 13
}
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: 'dodgerblue'
},
emphasis: {
areaColor: 'darkorange'
}
}
}
]
// 渲染地图
myMapChart.setOption(option)
}
}
}
