npm install echarts@4.9.0 --save
注:不建议安装最新版本最新版本多少会有bug
import echarts from 'echarts'
// 挂载到vue原型中就可以全局使用
Vue.prototype.$echarts = echarts
this.$echarts 即可使用
中国地图的地址在 node_modules_echarts@4.9.0@echarts\map\json 文件夹下
import geoJson from "echarts/map/json/china";
let myChart = this.$echarts.init(document.getElementById("main"));
this.$echarts.registerMap("china", geoJson);
let option = {
// 背景色
backgroundColor: "rgb(121,145,200)",
// 配置项(组件)
geo: {
map: "china",
// 地图的长宽比例
aspectScale: 0.75,
// 图层
zoom: 1.1,
// 样式
itemStyle: {
// 标准
normal: {
// 地图区域的颜色
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
// 颜色的步骤
colorStops: [
{
offset: 0,
color: "#09132c",
},
{
offset: 1,
color: "#274d68",
},
],
// 延长作用域
globalCoord: true,
},
// 盒子的阴影
shadowColor: "rgb(58,115,192)",
// 偏移
shadowOffsetX: 10,
shadowOffsetY: 11,
},
},
region: [
{
name: "南海诸岛",
itemStyle: {
opacity: 0,
},
},
],
},
series: [
// 配置地图相关的数据参数
{
type: "map",
label: {
normal: {
// 显示文字
show: true,
textStyle: {
color: "#1DE9B6",
},
},
emphasis: {
textStyle: {
color: "rgb(183,185,14)",
},
},
},
// 图层
zoom: 1.1,
map: "china",
itemStyle: {
normal: {
// 背景色
backgroundColor: "rgb(147,235,248)",
// 边框
borderWidth: 1,
// 区域颜色
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
// 文档
r: 0.8,
colorStops: [
{ offset: 0, color: "rgb(34,54,150)" },
{ offset: 1, color: "rgb(89,128,142)" },
],
// 全局生效
globalCoord: true,
},
},
// 高亮效果
emphasis: {
areaColor: "rgb(46,229,206)",
borderWidth: 0.1,
},
},
},
],
}
注意:注册的是中国地图,必须包括geo组件或者mep图标类型的时候才可以使用
myChart.setOption(option);
以上就是在vue中如何正确的使用echarts插件来完成中国地图的绘画和实现步骤。希望本篇文章能够帮助到你,不懂得可以评论区或者私信问我,我也会一 一解答。谢谢观看!
我的其他文章