vue项目中引入echarts-map地图 - 好文

<>如何在vue项目中使用地图

在初始的项目中安装下载echarts依赖：
https://blog.csdn.net/marslover521/article/details/85000788
<https://blog.csdn.net/marslover521/article/details/85000788>

通过上面的参考链接可以简单实现一个echarts图表，完成后再继续以下操作：

<>1.引入china.js

main.js
import echarts from 'echarts' //引入中国地图依赖 import 'echarts/map/js/china'
<>2.使用china

xxx.vue
<template> <div class="fl mapDiv"> <div class="mapCon"> <div
class="title">城市品种个数</div> <div id="mapChart" class="mapChart"></div> </div>
</div> </template> <script> import Vue from "vue"; // import Heatmap from
"heatmap.js"; export default { data() { return {}; }, mounted() {
this.drawLine(); }, methods: { drawLine() { let data = [ { name: "海门", value:
119 }, { name: "鄂尔多斯", value: 112 }, { name: "招远", value: 112 }, { name: "舟山",
value: 112 }, { name: "齐齐哈尔", value: 114 }, { name: "盐城", value: 115 }, { name:
"赤峰", value: 116 }, { name: "青岛", value: 118 }, { name: "乳山", value: 118 } ];
var mapChart = this.$echarts.init(document.getElementById("mapChart")); var
option = { backgroundColor:'#fff', tooltip: { trigger: "item" }, geo: { map:
"china", right: "2%", left: "30%", label: { normal: { show: true, color: "#fff"
}, emphasis: { show: false } }, roam: true, itemStyle: { normal: { borderWidth:
1, areaColor: "rgba(128, 128, 128, 0)", borderColor: "#3CC3FF" }, emphasis: {
areaColor: "#3EF3F4" } } }, series: [ { name: "品种个数", type: "scatter",
coordinateSystem: "geo", data: convertData(data), symbolSize: function(val) {
return val[2] / 10; }, label: { normal: { formatter: "{b}", position: "right",
show: false }, emphasis: { show: true } }, itemStyle: { normal: { color:
"#ddb926" } } }, { name: "品种个数", type: "effectScatter", coordinateSystem:
"geo", data: convertData( data.sort(function(a, b) { return b.value - a.value;
}).slice(0, 6) ), //标记大小，地图上的圆点 symbolSize: function(val) { return val[2] / 10;
}, showEffectOn: "render", rippleEffect: { brushType: "stroke" },
hoverAnimation: true, label: { //地图黄点显示内容 normal: { formatter: "{b}", position:
"right", show: true } }, itemStyle: { normal: { color: "#f4e925", shadowBlur:
10, shadowColor: "#333" } }, zlevel: 1 } ] }; mapChart.setOption(option);
mapChart.resize(); } } }; </script> <style> .mapDiv { width: 50%; height: 50%;
padding: 10px; box-sizing: border-box; } .mapCon .title { position: absolute;
z-index: 1; height: 34px; line-height: 34px; font-size: 18px; font-weight: 700;
padding-left: 14px; border-left: 6px solid #abd3d5; box-sizing: border-box; }
.mapCon, .mapChart { height: 100%; width: 100%; } </style>

热门工具换一换