echarts迁徙图 vue_vue项目中引入echarts-map地图

本文介绍了如何在Vue项目中引入并使用Echarts地图,特别是中国的省份分布图。首先,通过npm安装echarts及相关地图js文件,然后在main.js中导入并初始化。接着,在组件中定义地图选项,展示不同城市的品种数量,通过scatter和effectScatter系列创建视觉效果。文章提供了详细的代码示例,展示了地图配置和数据绑定。
摘要由CSDN通过智能技术生成

vue项目中引入echarts-map地图

发布时间:2019-01-17 15:41,

浏览次数:1182

, 标签:

vue

echarts

map

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

在初始的项目中安装下载echarts依赖:

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

class="title">城市品种个数

"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(); } } };

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%; }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值