直接步入正题:
地图插件在node_modules文件中的echarts/map/js/province中
"dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"echarts": "^4.1.0",
"echarts-liquidfill": "^2.0.2",
"element-ui": "^2.6.1",
"jquery": "^3.4.1",
"moment": "^2.26.0",
"node-sass": "^4.11.0",
"nprogress": "^0.2.0",
"sass-loader": "^7.1.0",
"video.js": "^7.6.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.1.0"
}
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Element from 'element-ui'
import 'echarts-liquidfill'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(Element)
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
<template>
<div><div id="main" style="width: 100%;height:760px;"></div></div>
</template>
<script>
import jq from 'jquery';
import echarts from 'echarts';
import 'echarts/map/js/province/hubei.js';
export default {
name: 'map2',
data() {
return {};
},
created() {},
mounted() {
this.initMap();
},
methods: {
initMap() {
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '地图入门示例-type:map'
},
tooltip: {},
grid: {
default: false,
x: '0%',
y: '0%',
width: '0%',
height: '0%'
},
toolbox: {
show: true,
feature: {
dataView: {
readOnly: false
},
saveAsImage: {}
}
},
xAxis: {},
yAxis: {},
series: {
type: 'map',
map: '湖北',
left: '20%',
itemStyle: {
normal: {
borderColor: '#2364c9',
borderWidth: 1,
areaColor: '#2BA7E5',
label: {
show: true
}
},
emphasis: {
areaColor: '#0f4eb0'
}
},
data: []
}
};
myChart.setOption(option);
//单击事件
myChart.on('click', this.areaClick);
},
areaClick(params) {
console.log(params);
}
}
};
</script>