vue中echarts@4.9版本,地图的使用方式
更新时间:2024年02月29日 08:52:21 作者:广州第22号吴彦祖
这篇文章主要介绍了vue中echarts@4.9版本地图的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue echarts@4.9版本地图的使用
避免进坑,亲测4.9版本正常,5.0版本不支持因为官方移除了地图数据和map文件夹,
安装echarts
npm install echarts@4.9.0
在main.js写入
import echarts from 'echarts' import 'echarts/map/js/china' Vue.prototype.$echarts = echarts
map地图组件
<template> <div class="chinaecharts"> <div id="mapChart" ref="mapChart" ></div> </div> </template> <script> export default { name: 'ChinaEcharts', methods: { mapFn(){ // 基于准备好的dom,初始化echarts实例 // var mapChart = this.$echarts.init(this.$refs.mapChart); var mapChart = this.$echarts.init(document.getElementById('mapChart')); mapChart.setOption({ backgroundColor: '', //背景颜色 title: { text: '你好啊中国', subtext: '我来自中国', color: '#fff', fontSize:'14px', // sublink: 'http://www.pm25.in', x:'left', }, //是视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)。 visualMap: { orient: 'horizontal', text:['低','高'], min: 0, //最小值 max: 600, //最大值 calculable: false, //是否显示拖拽用的手柄(手柄能拖拽调整选中范围)。 inRange: { color: ['#0F9D90', '#39B1A6', '#95DCD7', '#AEE7E4', '#D7FBFA'] //颜色 }, textStyle: { color: '#000' }, }, // 提示框,鼠标移入 tooltip:{ show:true, //鼠标移入是否触发数据 trigger: 'item', //出发方式 formatter:'{b}-销售数量:{c}' }, //配置地图的数据,并且显示 series:[ { name:'地图', type: 'map', //地图种类 map: 'china', //地图类型。 data:[ {name: '北京',value: Math.round(Math.random()*500)}, {name: '天津',value: Math.round(Math.random()*500)}, {name: '上海',value: Math.round(Math.random()*500)}, {name: '重庆',value: Math.round(Math.random()*500)}, {name: '河北',value: Math.round(Math.random()*500)}, {name: '河南',value: Math.round(Math.random()*500)}, {name: '云南',value: Math.round(Math.random()*500)}, {name: '辽宁',value: Math.round(Math.random()*500)}, {name: '黑龙江',value: Math.round(Math.random()*500)}, {name: '湖南',value: Math.round(Math.random()*500)}, {name: '安徽',value: Math.round(Math.random()*500)}, {name: '山东',value: Math.round(Math.random()*500)}, {name: '新疆',value: Math.round(Math.random()*500)}, {name: '江苏',value: Math.round(Math.random()*500)}, {name: '浙江',value: Math.round(Math.random()*500)}, {name: '江西',value: Math.round(Math.random()*500)}, {name: '湖北',value: Math.round(Math.random()*500)}, {name: '广西',value: Math.round(Math.random()*500)}, {name: '甘肃',value: Math.round(Math.random()*500)}, {name: '山西',value: Math.round(Math.random()*500)}, {name: '内蒙古',value: Math.round(Math.random()*500)}, {name: '陕西',value: Math.round(Math.random()*500)}, {name: '吉林',value: Math.round(Math.random()*500)}, {name: '福建',value: Math.round(Math.random()*500)}, {name: '贵州',value: Math.round(Math.random()*500)}, {name: '广东',value: Math.round(Math.random()*500)}, {name: '青海',value: Math.round(Math.random()*500)}, {name: '西藏',value: Math.round(Math.random()*500)}, {name: '四川',value: Math.round(Math.random()*500)}, {name: '宁夏',value: Math.round(Math.random()*500)}, {name: '海南',value: Math.round(Math.random()*500)}, {name: '台湾',value: Math.round(Math.random()*500)}, {name: '香港',value: Math.round(Math.random()*500)}, {name: '澳门',value: Math.round(Math.random()*500)}, {name: '南海诸岛',value: Math.round(Math.random()*500)} ], itemStyle: { //地图区域的多边形 图形样式。 emphasis:{ //高亮状态下的样试 label:{ show:true, } } }, zoom:1,//放大比例 label: { //图形上的文本标签,可用于说明图形的一些数据信息 show:true, }, }, { type:'scatter', showEffectOn: 'render',//配置什么时候显示特效 coordinateSystem:'geo',//该系列使用的坐标系 symbolSize:10,//标记的大小 data:[ {name: '宜昌', value: [111.3,30.7,130]}, ], zlevel:99999 }, ], }), window.addEventListener('resize', () => { // 自动渲染echarts mapChart.resize(); }) } }, mounted () { this.mapFn(); } } </script> <style scoped> .chinaecharts { width: 100%; height: 100%; } #mapChart { width: 100%; height: 100%; } </style>
然后按组件引入即可使用 效果如下
echarts配置:(https://echarts.apache.org/zh/api.html#echarts)
echarts地图不显示图例
如果你的 echarts 地图不显示图例
可能是以下几个原因导致的
- 没有启用图例。在配置项中,可以使用 legend.show 属性来控制是否显示图例。如果将其设置为 false,则不会显示图例。
- 图例被遮盖。如果图例位置与其他图形重叠,则可能会被遮盖,导致看不到图例。
- 图例样式设置不当。在配置项中,你可以使用 legend.textStyle 属性来设置图例文字的样式,包括颜色、大小、字体等。如果设置不当,图例可能看不清。
- 数据不正确。如果你的数据中没有包含图例所需的信息,或者数据格式不正确,则可能导致图例不显示。
建议检查以上几点,找出导致图
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
最近小编接到这样的需求:弹出框(或Popover)在 show 后,点击空白处可以将其 hide。针对这个需求,小编整理了三种实现方式,如果大家对vue 点击空白隐藏节点问题感兴趣的朋友跟随小编一起看看吧2019-10-10Vue中 Runtime + Compiler 和 Runtime-o
这篇文章主要介绍了Vue中 Runtime + Compiler 和 Runtime-only 两种模式含义和区别,结合实例形式详细分析了Vue中 Runtime + Compiler 和 Runtime-only 两种模式基本功能、原理、区别与相关注意事项,需要的朋友可以参考下2023-06-06
最新评论