vue中echarts引入中国地图的案例

如下所示：

<div id=”myChartChina” :style=”{width: ’100%’, height: ’500px’}”></div> mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom，初始化echarts实例 var myChartContainer = document.getElementById(’myChartChina’); var resizeMyChartContainer = function(){ myChartContainer.style.width=(document.body.offsetWidth/2)+’px’//页面一半的大小 } resizeMyChartContainer(); var myChartChina = this.$echarts.init(myChartContainer); function randomData() { return Math.round(Math.random()*500); } // 绘制图表 var optionMap = { tooltip: {}, legend: { orient: ’vertical’, left: ’left’, data:[’’] }, visualMap: { min: 0, max: 1500, left: ’10%’, top: ’bottom’, text: [’高’,’低’], calculable : true, color:[’#0b50b9’,’#c3e2f4’] }, selectedMode: ’single’, series : [ { name: ’’, type: ’map’, mapType: ’china’, itemStyle: { normal:{ borderColor: ’rgba(0, 0, 0, 0.2)’ }, emphasis:{ shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: ’rgba(0, 0, 0, 0.5)’ } }, showLegendSymbol: true, label: { normal: { show: true }, emphasis: { show: true } }, data:[ {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() }, {name: ’澳门’,value: randomData() } ] } ] } myChartChina.setOption(optionMap); window.onresize=function(){ resizeMyChartContainer(); myChartChina.resize(); } }

主要注意的一点在main.js里面：

除了引入echarts之外

// 引入echartsimport echarts from ’echarts’Vue.prototype.$echarts = echarts// 还要特别引入china.json，这样中国地图才会出现，不然只会出现右下角的南海诸岛import china from ’echarts/map/json/china.json’echarts.registerMap(’china’, china)

补充知识：VUE中给template组件加背景

我就废话不多说了，大家还是直接看代码吧~

<template> <div class=”index_background” > </div></template><style>.index_background{ background: url(’~@/../static/images/login-bg.png’) center top no-repeat;}</style>

以上这篇vue中echarts引入中国地图的案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

2021-06-06在vue中使用 echarts3d地图

vue

以陕西为例整理的任意省份echarts地图生成及调整方法

echarts地图部分仅含中国地图与少量省市地图，现以陕西省为例，基于JSON方式给出基础的省份地图生成方法。

在vue 中使用百度echarts

前言：在vue2.0中使用百度echarts 有三种解决方案。这样每次都要获取图表dom元素然后通过setOption渲染数据，最后在mounted中初始化。

vue-echarts 是ECharts 的 Vue.js 组件，基于 ECharts v4.1.0 + 开发，依赖 Vue.js v2.2.6 +，意思就是可以直接把echarts实例当中vue中的组件来使用，不用每次都获取dom、挂在dom，轻松使用echarts的所用功能。 v-charts 是基于vue2二次封装的图表组件库，功能没有echarts多但也够用了，官网很详细，这里用一个官网例子说明问题。

我用的echarts中国地图怎么获取到当前选中的区域id或者名称

第步新建静态页面bar.html修改title并引入echarts js文件图所示：第二步添加条状图容器插入div并给id属性宽度高度图所示：第三步编写条状图js代码添加数据式图所示：第四步预览该图形界面看效图图所示：第五步编写点击条状图柱获取namevalue图所示：第六步再预览该界面打浏览器控制台查看打印结图所示：