vue+Echarts中国地图绘教程最新版2021（无废话版，价值几十亿，收藏备用） |
您所在的位置：网站首页 › vue实现地图 › vue+Echarts中国地图绘教程最新版2021（无废话版，价值几十亿，收藏备用） |
vue+Echarts中国地图绘教程最新版2021（无废话版，价值几十亿，收藏备用）
|
近期用Echarts开发数据可视化的中国地图，发现控制台一直报错，原来是Echarts已经更新到5.0，不仅新增了一些动态图表，也对一些属性进行了更改，在此写个教程一、npm安装依赖 Echarts最新的5.0版本，缺少内置的中国地图资料文件（china.js），所以只能用4.9版本，命令如下 `npm install [email protected]`也可通过package.json文件查看/修改版本号  二、引入Echarts相关依赖import echarts from "echarts/lib/echarts" import china from 'echarts/map/json/china.json' echarts.registerMap('china',china) Vue.prototype.$echarts = echarts 三、地图代码 require("echarts/map/json/china.json"); export default { props: {}, data() { return {}; }, created() { }, mounted(){ this.drawLine() }, methods: { drawLine() { var myChartContainer = document.getElementById("myChartChina"); //绑定div容器 var resizeMyChartContainer = function () { myChartContainer.style.width = 100 + "%"; myChartContainer.style.height = window.innerHeight * 0.7 + "px"; }; resizeMyChartContainer(); var myChartChina = this.$echarts.init(myChartContainer); function randomData() { return Math.round(Math.random() * 500); } // 绘制图表 var optionMap = { tooltip: { trigger: "item", }, //左侧小导航图标 visualMap: { show: false, x: "left", y: "center", //改变地图区域颜色 splitList: [ { start: 500, end: 600 }, { start: 400, end: 500 }, { start: 300, end: 400 }, { start: 200, end: 300 }, { start: 100, end: 200 }, { start: 0, end: 100 }, ], color: [ "#ffff00", "#0e94eb", "#70bcf0", "#f0f26c", "#00cd00", "#eff26f", ], }, //配置属性 series: [ { name: "数据", type: "map", mapType: "china", roam: false, label: { normal: { show: false, //省份名称 }, emphasis: { show: false, }, }, data: [ { name: "北京", value: "100" }, { name: "天津", value: randomData() }, { name: "上海", value: randomData() }, { name: "重庆", value: randomData() }, { name: "河北", value: randomData() }, { name: "河南", value: randomData() }, { name: "云南", value: randomData() }, { name: "辽宁", value: randomData() }, { name: "黑龙江", value: randomData() }, { name: "湖南", value: randomData() }, { name: "安徽", value: randomData() }, { name: "山东", value: randomData() }, { name: "新疆", value: randomData() }, { name: "江苏", value: randomData() }, { name: "浙江", value: randomData() }, { name: "江西", value: randomData() }, { name: "湖北", value: randomData() }, { name: "广西", value: randomData() }, { name: "甘肃", value: randomData() }, { name: "山西", value: randomData() }, { name: "内蒙古", value: randomData() }, { name: "陕西", value: randomData() }, { name: "吉林", value: randomData() }, { name: "福建", value: randomData() }, { name: "贵州", value: randomData() }, { name: "广东", value: randomData() }, { name: "青海", value: randomData() }, { name: "西藏", value: randomData() }, { name: "四川", value: randomData() }, { name: "宁夏", value: randomData() }, { name: "海南", value: randomData() }, { name: "台湾", value: randomData() }, { name: "香港", value: randomData() }, { name: "澳门", value: randomData() }, ], //数据 }, ], }; myChartChina.setOption(optionMap); window.onresize = function () { resizeMyChartContainer(); myChartChina.resize(); }; }, } }; 效果图 下期分享，echarts gl的3D数据可视化功能教程，手摸手教学：宝，答应我别人会的你都得会
|
【本文地址】
今日新闻 |
推荐新闻 |