vue集成echarts 绘制中国地图

最近项目遇见了需要以中国地图展示的需求了解到 echarts 是一个很好用的图表展示工具，但发现官网没有关于中国地图的组件，经过了解，echarts 5.0以上将中国地图去掉了，需要用到china.js 文件官网没有了网络上倒是有些资源。我们集成的是echarts 4.8.则不需要引入china.js文件可通过 console.log(echarts.version); 来查看echarts 版本，
下面看效果

如果是echarts 5.0以下直接复制代码即可

<template><div><div id="map" :style="{ height: '560px', width: '520px' }"/></div>
</template><script>
import * as echarts from 'echarts';
import 'echarts/map/js/china.js';export default {data() {return {};},mounted() {this.init();},methods: {init() {// 基于准备好的dom，初始化echarts实例let chinaMap = echarts.init(document.getElementById("map"));window.onresize = chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resizechinaMap.setOption({tooltip: {trigger: 'item',formatter: function (e) {return e.value === "NaN" ? e.name + "：" + '0' : e.name + "：" + e.value + " <br/>" + "66c";}},legend: {orient: 'vertical',left: 'left'},visualMap: {min: 0,max: 10000,left: 10,bottom: 10,showLabel: !0,text: ["高", "低"],textStyle: {color: '#000'},pieces: [{gt: 100,label: "> 100",color: "#7f1533"}, {gte: 10,lte: 100,label: "10 - 100",color: "#ff5428"}, {gte: 1,lt: 10,label: "1 - 9",color: "#ff8c71"}, {gt: 0,lt: 1,label: "1",color: "#ffd768"}, {value: 0,color: "#ffffff"}],show: !0},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},geo: {map: "china",roam: !1,scaleLimit: {min: 1,max: 2},zoom: 1.23,// top: 120,label: {normal: {show: !0,fontSize: "14",color: "rgba(0,0,0,0.7)"}},itemStyle: {normal: {//shadowBlur: 50,//shadowColor: 'rgba(0, 0, 0, 0.2)',borderColor: "rgba(0, 0, 0, 0.2)"},emphasis: {areaColor: "#f2d5ad",shadowOffsetX: 0,shadowOffsetY: 0,borderWidth: 0}}},series: [{type: 'map',mapType: 'china',roam: false,geoIndex: 0,label: {normal: {show: true},emphasis: {show: true}},data: [{name: '上海', value: 10},{name: '广东', value: 100},{name: '山东', value: 5999}]}]});}}
};
</script>

vue集成echarts 绘制中国地图相关推荐

vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
vue - vue使用echarts实现中国地图和点击省份进行查看
文章目录 1,实现的效果和功能 2,安装ECharts 3,main.js里面引入echarts 4,实现如下 5,遇到的问题 6,用到的模拟数据 1,实现的效果和功能 vue使用echarts实现中 ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
vue中使用echarts绘制中国地图
首先需要一个绘制中国地图的json文件(资源还在审核,审核过后会重新贴上来) 1.首先引入echarts和json文件,在需要的地方引即可 import echarts from 'echarts'; ...
Vue环境下用ECharts绘制中国地图，并实现拖动、缩放与各省份自动轮播高亮显示
}, { name: "福建", value: 20, }, { name: "贵州", value: 74, }, { name: "广东" ...
广西地图html插件,ECharts绘制中国地图、广西地图
准备工作:导入ECharts依赖.和地图需要的.js文件. 文件获取方式: 官网:url github:url (下载完后 :incubator-echarts-4.8.0mapjsprovince目 ...
vue3+echarts绘制中国地图
最近接到一个需求是做一个中国地图样式大概是这样的需求是要去掉南海,但是由于csdn地图校验,图片如果没有南海会出现图片违规情况,要实现去掉南海,百度查阅相关资料都是说要这样,这个方法的大概意思就是 ...
echaer 地图_用echarts绘制中国地图
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
vue 引入echarts画中国地图 Map china not exists
现象:在vue里用echarts画地图时报错:Map china not exists. 只出现了南海诸岛部分原因:没引入地图数据解决: import 'echarts/map/js/china. ...

vue集成echarts 绘制中国地图

vue集成echarts 绘制中国地图相关推荐

最新文章

热门文章