记录Echarts + Vue 踩坑
使用Echarts 来 绘制地图轮廓图
第一步 要引入 Echarts
引入Echarts/map/ 下的 地区.js 文件
第二步 在视图中, 放置地图容器
第三步 配置地图 option
第四步 将option 挂载到 Echarts
完成代码如下
<div ref="map" style="height:600px;width:600px;"></div>
import "echarts/map/js/province/zhejiang.js";
import echarts from "echarts";
import option from "./map-option.js";
mapEchartsInit() {
var myChart = this.$echarts.init(this.$refs.map);
myChart.setOption(option, true);
}
mounted() {
this.mapEchartsInit();
}
export default {
title: {
text: "订阅我博客的人群分布",
subtext: "纯属虚构",
x: "center"
},
tooltip: {
trigger: "item"
},
legend: {
orient: "vertical",
x: "left",
data: ["iphoneX"]
},
dataRange: {
min: 0,
max: 2500,
x: "left",
y: "bottom",
text: ["max", "min"],
calculable: true
},
toolbox: {
show: true,
orient: "vertical",
x: "right",
y: "center",
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
roamController: {
show: true,
x: "right",
mapTypeControl: {
china: true
}
},
series: [
{
name: "iphoneX",
type: "map",
mapType: "浙江",
roam: false,
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: [
{ name: "湖州市", value: 130 },
{ name: "杭州市", value: 666 },
{ name: "丽水市", value: 200 },
{ name: "金华市", value: 1111111 },
{ name: "嘉兴市", value: 300 },
{ name: "舟山市", value: 10 },
{ name: "台州市", value: 70 },
{ name: "温州市", value: 50 },
{ name: "丽水市", value: 877 },
{ name: "绍兴市", value: 1000 }
]
}
]
};
效果如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2a0e789efdb6d96ff7649da0de4bf9cd.png#pic_center)
如有更好的方案可以联系我:
微信: daxin261
关注公众号 获取更多 "前端资讯"
:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/585d9884851106560d2f6b1bfd3af198.png#pic_center)
参考文章:
前端学习 之 Vue 引入Echarts地图
地图JSON 资源
DATAV 提供地图数据