|
在实际工作中经常会用到echarts，在echarts中使用地图也会占很大的比重，其中又以在地图中进行标点为重中之重。那么我现在就来说怎么在vue中使用echarts的地图加散点图进行绘制；
首先，我们要先安装echarts npm install echarts -S然后在main.js引用 import echarts from 'echarts' Vue.prototype.$echarts = echarts再然后就开始写代码了，我拿vue中的app.vue来写的。 <div id="myEchart" ref="myEchart" :style="{height:'800px',width:'100%'}"></div>js中我们引入echarts和china.jsimport echarts from "echarts"; import "./../node_modules/echarts/map/js/china.js";这里引入地图的时候，我们可以直接在node_modules里找到这个china.js，当然我们也可以引入json来生成地图的，至于json去哪儿找，我是不会告诉你萌的（https://datav.aliyun.com/tools/atlas/） 第一步，我们肯定是要先绘制地图出来，vue和在html中一样，我们首先要找到绘制地图的容器 let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置第二步就是要进行相关的配置了 myChart.setOption({
// 进行相关配置
backgroundColor: "#02AFDB",
geo: {
// 这个是重点配置区
map: "china", // 表示中国地图
roam: true,
label: {
normal: {
show: true // 是否显示对应地名
}
},
itemStyle: {
// 定义样式
normal: {
// 普通状态下的样式
areaColor: "#323c48",
borderColor: "#111"
},
emphasis: {
// 高亮状态下的样式
areaColor: "#2a333d"
}
}
},
});配置成这样的时候我们的地图就能够显示出来了，接下来就要做散点图了首先我们要加一个series，然后在里边进行配置， series: [
{
name: "销量",
type: "scatter",
coordinateSystem: "geo", // 对应上方配置
symbolSize: function(data) {
console.log("data", data);
return data[2] / 10;
},
data: that.myData
}
]这里的coordinateSystem要和上边的配套使用，因为上边地图配置是geo，所以这里要是geo才行。然后这里的data我是写在vue组件的data里的。 data() {
return {
myData: [
{ name: "海门", value: [121.15, 31.89, 60] },
{ name: "鄂尔多斯", value: [109.781327, 39.608266, 180] },
{ name: "招远", value: [120.38, 37.35, 300] },
{ name: "舟山", value: [122.207216, 29.985295, 20] }
]
};
},这里边的value解释一下，数组的三个项分别是经纬度和值再看上边的series里的配置，symbolSize是配置散点图图标大小的选项，有时候会让散点图的大小根据数据里的值来进行改变，所以这里进行了自定义，让散点图的图标大小根据数据里的值来进行设置的，让散点图图标大小等于数值除以10来获取。 接下来上完整的js代码 import echarts from "echarts";
import "./../node_modules/echarts/map/js/china.js";
export default {
data() {
return {
myData: [
{ name: "海门", value: [121.15, 31.89, 60] },
{ name: "鄂尔多斯", value: [109.781327, 39.608266, 180] },
{ name: "招远", value: [120.38, 37.35, 300] },
{ name: "舟山", value: [122.207216, 29.985295, 20] }
]
};
},
mounted() {
this.chinaConfigure();
},
methods: {
chinaConfigure() {
var that = this;
let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
window.onresize = myChart.resize;
myChart.setOption({
// 进行相关配置
backgroundColor: "#02AFDB",
geo: {
// 这个是重点配置区
map: "china", // 表示中国地图
roam: true,
label: {
normal: {
show: true // 是否显示对应地名
}
},
itemStyle: {
// 定义样式
normal: {
// 普通状态下的样式
areaColor: "#323c48",
borderColor: "#111"
},
emphasis: {
// 高亮状态下的样式
areaColor: "#2a333d"
}
}
},
series: [
{
name: "销量",
type: "scatter",
coordinateSystem: "geo", // 对应上方配置
symbolSize: function(data) {
console.log("data", data);
return data[2] / 10;
},
data: that.myData
}
]
});
}
}
}; |
|
|
沙发#
发布于：2020-02-21 12:22
这个demo的代码我放在github上了，地址是https://github.com/exwangwei/vue-echartsMap
一个很简单的demo，感兴趣的可以看看 |
|
