echarts实现中国地图各省背景根据数值大小变化的方法

很多人不清楚中国地图要怎么实现，其实 echarts 已经为我们封装好了，只要我们配置好各省数据就可以快捷实现了。

首先我们先来实现中国地图：

中国地图的实现

（1）引入 echarts 及中国地图

// import echarts from "echarts";
import * as echarts from 'echarts'
import 'echarts/map/js/china.js'

（2）配置地图数据

options: {tooltip: {triggerOn: "mousemove",   //mousemove、clickpadding:8,borderWidth:1,borderColor:'#409eff',backgroundColor:'rgba(255,255,255,0.7)',textStyle:{color:'#000000',fontSize:13},formatter: function(e, t, n) {let data = e.data;//模拟数据data.specialImportant = Math.random()*1000 | 0;data.import = Math.random()*1000 | 0;data.compare = Math.random()*1000 | 0;data.common = Math.random()*1000 | 0;data.specail = Math.random()*1000 | 0;let context = `<div><p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p><p class="tooltip_style"><span class="tooltip_left">事件总数</span><span class="tooltip_right">${data.value}</span></p><p class="tooltip_style"><span class="tooltip_left">特别重大事件</span><span class="tooltip_right">${data.specialImportant}</span></p><p class="tooltip_style"><span class="tooltip_left">重大事件</span><span class="tooltip_right">${data.import}</span></p><p class="tooltip_style"><span class="tooltip_left">较大事件</span><span class="tooltip_right">${data.compare}</span></p><p class="tooltip_style"><span class="tooltip_left">一般事件</span><span class="tooltip_right">${data.common}</span></p><p class="tooltip_style"><span class="tooltip_left">特写事件</span><span class="tooltip_right">${data.specail}</span></p></div>`return context;}},// 这里是比较重要的代码，渲染省份背景颜色的visualMap: {show:true,left: 26,bottom: 40,showLabel:true,pieces: [{gte: 100,label: ">= 1000",color: "#1f307b"},{gte: 500,lt: 999,label: "500 - 999",color: "#3c57ce"},{gte: 100,lt:499,label: "100 - 499",color: "#6f83db"},{gte: 10,lt: 99,label: "10 - 99",color: "#9face7"},{lt:10,label:'<10',color: "#bcc5ee"}]},// 这里是配置地图类型，除了中国地图、还可以配置省份、全球地图等geo: {map: "china",// scaleLimit: {//   min: 1,//   max: 2// },zoom: 3,roam: true,top: 120,label: {normal: {show:true,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: [{name: "突发事件",type: "map",geoIndex: 0,data:[]}]},

实现的样子：

根据省份数值大小填充不同的颜色

（1）根据数值区间配置不同的颜色

核心代码：

visualMap: {show:true,left: 26,bottom: 40,showLabel:true,pieces: [{gte: 100,label: ">= 1000",color: "#1f307b"},{gte: 500,lt: 999,label: "500 - 999",color: "#3c57ce"},{gte: 100,lt:499,label: "100 - 499",color: "#6f83db"},{gte: 10,lt: 99,label: "10 - 99",color: "#9face7"},{lt:10,label:'<10',color: "#bcc5ee"}]},

（2）根据最大值和最小值，自动计算两个颜色的渐变

核心代码：

visualMap: {show:false,min: 0,max: 2000,// text:['High','Low'],realtime: false,calculable: true,inRange: {color: ['#5188e1', '#0d3358']  // 渐变的两个基本值}},

echarts实现中国地图各省背景根据数值大小变化的方法相关推荐

Vue+Echarts实现中国地图+各省业务数据分布情况组件
Vue组件首先需要引入echarts包和中国地图数据, import echarts from 'echarts' import '../../../node_modules/echarts/map/ ...
vue - vue使用echarts实现中国地图和点击省份进行查看
文章目录 1,实现的效果和功能 2,安装ECharts 3,main.js里面引入echarts 4,实现如下 5,遇到的问题 6,用到的模拟数据 1,实现的效果和功能 vue使用echarts实现中 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
Echarts实现中国地图完整示例
Echarts实现中国地图完整示例及js文件有问题大家可以留言或私信我公司是有一个产品,销量遍布全国. 近期要求制作一个***中国地图来显示所有省份的销量***,要有一个***滚动显示每个省的销量 ...
vue 引入json地图_vue中echarts引入中国地图的案例
如下所示: mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = d ...
vue项目使用ECharts的中国地图，设置地图不同板块的颜色以及动态显示效果
本篇讲述在vue中使用echarts的中国地图,以及对不同板块进行渐变色的设置. 效果图如下: 实现上图效果步骤如下: 确保项目中下载了echarts,然后在main.js中引用echarts imp ...
echarts初始化中国地图（Map）
echarts初始化中国地图 vue 中可以直接使用,修改文件地址即可更多echarts例子 1.http://www.ppchart.com/#/ 2.https://www.isqqw.com/ ...
echarts实现中国地图和各省市地图
echarts实现中国地图我会把china.js和各省市的js以及json上传资源,有需要的可以下载首先引入echarts.js和china.js <!DOCTYPE html> &l ...
Echarts实现——中国地图
Echarts实现--中国地图如下图: 使用Echarts进行地图绘制展示的时候,需要china.json: 举例在vue的项目中可以通过cnpm install echarts --save安装E ...

echarts实现中国地图各省背景根据数值大小变化的方法

中国地图的实现

根据省份数值大小填充不同的颜色

echarts实现中国地图各省背景根据数值大小变化的方法相关推荐

最新文章

热门文章