echarts实现中国地图，山西地图，图表面积图配置项

文章目录

1.vue引入echars
2.建立echars基本框架
3.中国地图
4.山西地图为例，展示点击获取城市名称并保存在data中，方便使用
6.图表面积图（大小，线条颜色，面积颜色，百分比显示，横坐标间隔显示）

1.vue引入echars

这里使用旧版本，因为新版本会报init初始化实例的错误，导致图标无法显示Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined。
终端下载echarts

npm install echarts@4.8.0 --save

3.在main.js中引入

import echarts from "echarts"
Vue.prototype.$echarts = echarts;

2.建立echars基本框架

就是在自己的页面引入官网echarts的代码，先建立一个基本框架如下

<template><div class="home"><!--外面这个随意，可加可不加--><div id="main" style="width: 600px; height: 400px"></div></div>
</template><script>export default {methods: {drawChart() {let myChart = this.$echarts.init(document.getElementById("main"));let option = {//这里直接复制官网里面option的代码};myChart.setOption(option);},},mounted() {this.drawChart();},
};
</script>

上面是一个基本框架，以后建立好框架直接引入即可

3.中国地图

中国地图

<template><div class="home"><div id="main" style="width: 600px; height: 400px"></div></div>
</template><script>
import 'echarts/map/js/china.js' // 引入中国地图数据
export default {methods: {drawChart() {let myChart = this.$echarts.init(document.getElementById("main"));myChart.setOption({ // 进行相关配置backgroundColor: "#02AFDB",//背景颜色tooltip: {}, // 鼠标移到图里面的浮动提示框dataRange: {show: true,//是否展示左下角图标min: 0,max: 1000,text: ['High', 'Low'],realtime: true,calculable: true,color: ['orangered', 'yellow', 'lightskyblue']//渐变颜色},geo: { // 图的配置map: 'china', // 表示中国地图roam: true,//是否缩放label: {normal: {show: true, // 是否显示对应地名textStyle: {color: 'rgba(0,0,0,0.4)'}}},itemStyle: {normal: {borderColor: 'rgba(0, 0, 0, 0.2)'},emphasis: {areaColor: null,shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},series: [{type: 'map',coordinateSystem: 'geo' // 对应上方配置},{name: '省市名字', // 浮动框的标题type: 'map',geoIndex: 0,data: [{"name": "北京","value": 599}, {"name": "上海","value": 142}, {"name": "黑龙江","value": 44}, {"name": "深圳","value": 92}, {"name": "湖北","value": 810}, {"name": "四川","value": 453}]}]})}
},mounted() {this.drawChart();}}
</script>

效果如下：

4.山西地图为例，展示点击获取城市名称并保存在data中，方便使用

山西地图，可点击获取城市名称

<template><divref="mapOption"style="height: 500px; width: 350px; background: rgb(136, 208, 226)"></div>
</template><script>
import "echarts/map/js/province/shanxi.js"; // 引入山西地图
export default {data() {return {city: "",mapOption: {tooltip: {//是否展示提示触碰trigger: "item",},legend: {//将会使地图上的圆点显示，不想显示去掉即可orient: "vertical",x: "left",data: ["iphoneX"],},dataRange: {//左下角图标的显示show: true,min: 0,max: 2500,x: "left",y: "bottom",text: ["max", "min"],calculable: false,},toolbox: {//是否提供下载，刷新等按钮show: true,//false则不显示orient: "vertical",x: "right",y: "center",feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true },},},series: [{name: "城市名称",//触碰提示框的文字type: "map",x: "center",showLegendSymbol: true,mapType: "山西",//可以自定义更改根据引入的地图json变化roam: false,itemStyle: {//板块样式normal: {//设置默认的样式label: { show: true },borderColor: "#0fb5b5",borderWidth: 1,//边框},emphasis: {//设置触碰后的样式show: true,label: {show: true,textStyle: {//设置触碰后的字体样式fontSize: 14,fontWeight: "bold",color: "red",},},},},data: [//自定义数据与返回的城市进行匹配{ name: "太原市", value: 130 },{ name: "晋中市", value: 140 },{ name: "吕梁市", value: 50 },{ name: "临汾市", value: 121 },{ name: "大同市", value: 155 },{ name: "方山市", value: 190 },{ name: "临县市", value: 110 },{ name: "运城市", value: 170 },{ name: "离石市", value: 1150 },{ name: "柳林市", value: 310 },{ name: "汾阳市", value: 150 },{ name: "朔州市", value: 150 },{ name: "忻州市", value: 150 },{ name: "阳泉市", value: 150 },{ name: "长治市", value: 150 },{ name: "晋城市", value: 150 },],},],},};},mounted() {//调用methods方法this.mapEchartsInit();},methods: {mapEchartsInit() {this.$echarts.init(this.$refs.mapOption).setOption(this.mapOption);//得到dom元素var _this = this;//定义this，解决this指向问题this.$echarts.init(this.$refs.mapOption).on("click", function (params) {_this.city = params.name;//将点击的city名传给data中的city接收，便于与后端数据匹配使用console.log(_this.city);//这里打印一下得到的城市名称});},},
};
</script><style scoped>
</style>

效果图如下：

6.图表面积图（大小，线条颜色，面积颜色，百分比显示，横坐标间隔显示）

<template><div id="main" style="width: 100%; height: 100%"></div>
</template><script>
export default {methods: {drawChart() {let myChart = this.$echarts.init(document.getElementById("main"));let option = {grid:{//设置图表与大边框的距离，可以用于放大图表，属性解释在最下方x:50,//左上角x方向的距离y:20,x2:20,//右下角y方向的距离y2:20,borderWidth:10},xAxis: {type: "category",boundaryGap: false,data: ["11:00", "", "11:15", "", "11:30", "", "11:45", "", "", ""],//x轴数据axisLabel: {interval: 1, //加入axisLabel字段,interval后面加你想要间隔的个数},},yAxis: [{type: "value",axisLabel: {//纵轴用百分比显示show: true,interval: "auto",formatter: "{value} %",},show: true,},],series: [{data: [90, 90, 80, 80, 80, 80, 80, 80, 80, 80],//value值type: "line",showSymbol: false,areaStyle: {opacity: 0.3,//设置背景颜色不透明度color: {colorStops: [//渐变色，我这里用的同一种颜色，可以改{offset: 0,color: "green", // 0% 处的颜色},{offset: 1,color: "green", // 100% 处的颜色},],},},itemStyle: {normal: {// 修改数据边界的线颜色lineStyle: {color: "rgba(56, 191, 96, 0.5)", //改变折线颜色},},},},],};myChart.setOption(option);},},mounted() {this.drawChart();},
};
</script><style lang="scss" scoped>
</style>

效果图如下

到这里结束，然后补充一些属性

针对div宽高100%，图表却很小的情况解决如下=>

1.改变图表大小，分别图表与最大边框左上角x,y的距离，以及与最大边框右下角的x2,y2距离,分别调整起图表大小

         grid:{x:50,y:20,x2:20,y2:20,borderWidth:10},

echarts实现中国地图，山西地图，图表面积图配置项相关推荐

微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
用Excel仿华尔街日报图表-面积图
"原图" 图表数据 PS:Excel 源文件可以加QQ群,在群文件中下载!
Echarts实现中国地图、省市地区地图
中国地图山西地图天津地图(实现3D立体效果) 地图赋值 initMapChart() {let mapData = [{name: '北京',value: this.randomData()}, ...
ECharts 创建中国气泡地图和定位图表点点击地区域高亮显示
ECharts 创建中国气泡地图和定位图表点点击地区域高亮显示 ECharts 官方案例: https://www.makeapie.com/editor.html?c=x_kEnG-Ggq 效果如 ...
echarts实现中国地图和各省市地图
echarts实现中国地图我会把china.js和各省市的js以及json上传资源,有需要的可以下载首先引入echarts.js和china.js <!DOCTYPE html> &l ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
vue 引入json地图_vue中echarts引入中国地图的案例
如下所示: mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = d ...
使用 echarts实现中国地图
效果图: 实现思路首先打开自己的 package.json 看看自己配置里面有: 如果没有的话手动输入然后 npm i 或者cnpm i 一键安装安装完成后需要到 main.js 里配置以下 ...
echarts geo地图示例_基于Echarts的中国地图数据展示
一.概述实际项目中大概率会遇到很多需要进行数据展示的地方,如折现图,柱状图等,今天给大家介绍一个更加炫酷的中国地图大数据展示,结合echarts免费开源第三方插件,可以实现自己的定制样式,定制提示. ...