ECharts中Map(地图)样式配置、渐变色生成

前言

ECharts是我们常用的图表控件，功能特别强大，每次使用都要查API比较繁琐，这里就记录开发中常用的配置。

官网：https://echarts.apache.org/handbook/zh/get-started

配置项：https://echarts.apache.org/zh/option.html#title

第三方示例平台：https://www.makeapie.cn/echarts

主题：https://echarts.apache.org/zh/theme-builder.html

样式

示例

let option = {tooltip: {show: true,formatter: function (params) {if (params.value.length > 1) {return "  " + params.name + "：" + params.value[2];} else {return "  " + params.name + "：" + (params.value || 0);}},},geo: {map: "china",zoom: 1.2,show: true,roam: false,emphasis: {label: {show: false,},},layoutSize: "100%",itemStyle: {borderColor: "rgba(147, 235, 248, 1)",borderWidth: 2,shadowColor: "rgb(90,160,234)",shadowOffsetX: 0,shadowOffsetY: 10,shadowBlur: 10,},},visualMap: {show: false,seriesIndex: [0],inRange: {color: ["#8db1f1", "#026aa9"],},},series: [{type: "map",map: "china",aspectScale: 0.75,zoom: 1.2,label: {show: true,color: "#ffffff",},itemStyle: {borderColor: "rgba(147, 235, 248, 1)",areaColor: {type: "radial",x: 0.5,y: 0.5,r: 0.9,colorStops: [{offset: 0,color: "rgba(17,217,245,0.5)", // 0% 处的颜色},{offset: 1,color: "rgba(10,209,231,0.2)", // 100% 处的颜色},],globalCoord: false, // 缺省为 false},borderWidth: 1,},emphasis: {label: {show: false,color: "#ffffff",},itemStyle: {areaColor: "#026aa9",borderColor: "#fff",borderWidth: 2,},},data: allData,},],
};

层级

地图的配置是一层盖一层，从底层到顶层的配置依次为：

geo => series => visualMap

geo 和 series 中都有两个配置项

• itemStyle 未选中的样式
• emphasis 选中的样式

geo隐藏掉只有series也是能正常显示整个地图的。

geo 和 series 的搭配可以实现一些阴影，偏移从而实现类似立体的效果。

visualMap

其中visualMap设置的背景颜色是动态的，会根据数值的大小在两个颜色之间变化。

visualMap: {show: false,seriesIndex: [0],inRange: {color: ["#cdcaf8", "#026aa9"],},
},

需要注意的是：

当区域有数据的时候会使用visualMap的颜色覆盖，如果没有数据则会使用series的itemStyle的样式。

默认最小值和最大值会根据数据自动计算，当然我们也可以指定具体的值。

visualMap: {min: 0,max: 100,inRange: {color: ['#e0ffff', '#0066ff'] // 设置颜色范围，浅色到深色},calculable: true,show: true
},

渐变色

线性渐变

沿着一条直线从一种颜色过渡到另一种颜色。

{type: "linear",x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: "#8db1f1", // 起始颜色},{offset: 1,color: "#026aa9", // 终止颜色},],
}

径向渐变

从一个中心点向四周辐射的渐变色。

{type: 'radial',x: 0.5, y: 0.5,r: 0.5,colorStops: [{offset: 0, color: 'rgba(255, 0, 0, 1)' // 起始颜色}, {offset: 1, color: 'rgba(0, 0, 255, 1)' // 终止颜色}]
}

你可以设置以下属性：

1. type：设置渐变的类型，固定值为 ‘radial’。
2. x、y：设置渐变的中心点坐标，取值范围为 0~1，其中 (0, 0) 表示左上角，(1, 1) 表示右下角。
3. r：设置渐变的半径，也是相对于整个绘图区域的半径，取值范围为 0~1，1 表示半径等于绘图区域的最短边的一半。
4. colorStops：设置渐变的起始颜色、终止颜色以及它们的位置。 它是一个数组，每个元素包含两个属性，分别是 offset 和 color。 其中 offset 表示该位置距离渐变位置的百分比，取值范围为 0~1，color 则是该位置所对应的颜色值。

覆盖散点

涟漪散点

series: [{type: "map",map: "china",aspectScale: 0.75,zoom: 1.2,label: {show: true,color: "#11688a",},itemStyle: {areaColor: "rgba(10,76,139,1)",borderColor: "#215495",borderWidth: 1,},emphasis: {label: {show: false,},itemStyle: { areaColor: "#061E3D" },},data: allData,},{type: "effectScatter",coordinateSystem: "geo",rippleEffect: {brushType: "stroke",},showEffectOn: "render",itemStyle: {color: {type: "radial",x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0,color: "rgba(5,80,151,0.2)",},{offset: 0.8,color: "rgba(5,80,151,0.8)",},{offset: 1,color: "rgba(0,108,255,0.7)",},],global: false, // 缺省为 false},},label: {show: true,color: "#fff",fontWeight: "bold",position: "inside",formatter: function (para) {return "{cnNum|" + para.data.value[2] + "}";},rich: {cnNum: {fontSize: 13,color: "#D4EEFF",},},},symbol: "circle",symbolSize: function (val) {if (val[2] === 0) {return 0;}let a = (maxSize4Pin - minSize4Pin) / (max - min);let b = maxSize4Pin - a * max;return a * val[2] + b * 1.2;},data: convertData(allData),zlevel: 1,},
],

let convertData = function (outdata) {let res = [];for (let i = 0; i < outdata.length; i++) {let geoCoord = geoCoordMap[outdata[i].name];if (geoCoord) {res.push({name: outdata[i].name,value: geoCoord.concat(outdata[i].value),});}}return res;
};

值类似于

{name : "陕西",value: [113.0668, 33.8818, 140]
}

普通散点

{type: "scatter",coordinateSystem: "geo",rippleEffect: {brushType: "stroke",},showEffectOn: "render",itemStyle: {color: {type: "radial",x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0,color: "rgba(5,80,151,0.8)",},{offset: 0.5,color: "rgba(0,108,255,0.7)",},{offset: 1,color: "rgba(5,80,151,0.2)",},],global: false, // 缺省为 false},},label: {show: true,color: "#fff",fontWeight: "bold",position: "inside",formatter: function (para) {return "{cnNum|" + para.data.value[2] + "}";},rich: {cnNum: {fontSize: 13,color: "#D4EEFF",},},},symbol: "circle",symbolSize: function (val) {if (val[2] === 0) {return 0;}let a = (maxSize4Pin - minSize4Pin) / (max - min);let b = maxSize4Pin - a * max;return a * val[2] + b * 1.2;},data: convertData(allData),zlevel: 1,
},

放射线

<template><div :class="className" :style="{ height: height, width: width }" />
</template><script>
import * as echarts from "echarts";
import resize from "@/assets/utils/resize.js";
import "@/assets/utils/china.js";export default {name: "BarChart",mixins: [resize],props: {className: {type: String,default: "chart",},width: {type: String,default: "100%",},height: {type: String,default: "100%",},title: {type: String,default: "",},chartData: {type: Object,default: () => {return {};},},},data() {return {chart: null,};},watch: {chartData: function () {this.initChart();},},async mounted() {await this.$nextTick();this.initChart();},beforeDestroy() {if (!this.chart) {return;}this.chart.dispose();this.chart = null;},methods: {initChart() {if (!this.chart) {this.chart = echarts.init(this.$el);}var chinaGeoCoordMap = {黑龙江: [127.9688, 45.368],内蒙古: [110.3467, 41.4899],吉林: [125.8154, 44.2584],北京市: [116.4551, 40.2539],辽宁: [123.1238, 42.1216],河北: [114.4995, 38.1006],天津: [117.4219, 39.4189],山西: [112.3352, 37.9413],陕西: [109.1162, 34.2004],甘肃: [103.5901, 36.3043],宁夏: [106.3586, 38.1775],青海: [101.4038, 36.8207],新疆: [87.9236, 43.5883],西藏: [91.11, 29.97],四川: [103.9526, 30.7617],重庆: [108.384366, 30.439702],山东: [117.1582, 36.8701],河南: [113.4668, 34.6234],江苏: [118.8062, 31.9208],安徽: [117.29, 32.0581],湖北: [114.3896, 30.6628],浙江: [119.5313, 29.8773],福建: [119.4543, 25.9222],江西: [116.0046, 28.6633],湖南: [113.0823, 28.2568],贵州: [106.6992, 26.7682],云南: [102.9199, 25.4663],广东: [113.12244, 23.009505],广西: [108.479, 23.1152],海南: [110.3893, 19.8516],上海: [121.4648, 31.2891],};let chinaDatas = [[{name: "黑龙江",value: 0,},],[{name: "内蒙古",value: 0,},],[{name: "吉林",value: 0,},],[{name: "辽宁",value: 0,},],[{name: "河北",value: 0,},],[{name: "天津",value: 0,},],[{name: "山西",value: 0,},],[{name: "陕西",value: 0,},],[{name: "甘肃",value: 0,},],[{name: "宁夏",value: 0,},],[{name: "青海",value: 0,},],[{name: "新疆",value: 0,},],[{name: "西藏",value: 0,},],[{name: "四川",value: 0,},],[{name: "重庆",value: 0,},],[{name: "山东",value: 0,},],[{name: "河南",value: 0,},],[{name: "江苏",value: 0,},],[{name: "安徽",value: 0,},],[{name: "湖北",value: 0,},],[{name: "浙江",value: 0,},],[{name: "福建",value: 0,},],[{name: "江西",value: 0,},],[{name: "湖南",value: 0,},],[{name: "贵州",value: 0,},],[{name: "广西",value: 0,},],[{name: "海南",value: 0,},],[{name: "上海",value: 1,},],];let allpoints = Object.values(chinaGeoCoordMap);let convertData = function (data) {let res = [];for (let i = 0; i < data.length; i++) {let dataItem = data[i];let fromCoord = chinaGeoCoordMap[dataItem[0].name];let toCoord = allpoints[Math.floor(Math.random() * allpoints.length)];if (fromCoord && toCoord) {res.push([{coord: fromCoord,value: dataItem[0].value,},{coord: toCoord,},]);}}return res;};var series = [];series.push({type: "lines",zlevel: 2,effect: {show: true,period: 4, //箭头指向速度，值越小速度越快trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重symbol: "arrow", //箭头图标symbolSize: 5, //图标大小},lineStyle: {normal: {width: 1, //尾迹线条宽度opacity: 1, //尾迹线条透明度curveness: 0.3, //尾迹线条曲直度color: "#17F5FF",},},data: convertData(chinaDatas),},{type: "effectScatter",coordinateSystem: "geo",zlevel: 2,rippleEffect: {//涟漪特效period: 4, //动画时间，值越小速度越快brushType: "stroke", //波纹绘制方式 stroke, fillscale: 4, //波纹圆环最大限制，值越大波纹越大},label: {normal: {show: true,position: "right", //显示位置offset: [5, 0], //偏移设置formatter: function (params) {//圆环显示文字return params.data.name;},fontSize: 10,color: "#FFFFFF",},emphasis: {show: true,},},symbol: "circle",symbolSize: function (val) {return 5 + val[2] * 5; //圆环大小},itemStyle: {normal: {show: false,color: "#17F5FF",},},data: chinaDatas.map(function (dataItem) {return {name: dataItem[0].name,value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value,]),};}),});let option = {tooltip: {show: false,trigger: "item",backgroundColor: "rgba(166, 200, 76, 0.82)",borderColor: "#FFFFCC",showDelay: 0,hideDelay: 0,enterable: true,transitionDuration: 0,extraCssText: "z-index:100",formatter: function (params) {//根据业务自己拓展要显示的内容var res = "";var name = params.name;var value = params.value[params.seriesIndex + 1];res ="<span style='color:#fff;'>" +name +"</span><br/>数据：" +value || 0;return res;},},geo: {map: "china",zoom: 1.2,label: {emphasis: {show: false,},},roam: false, //是否允许缩放itemStyle: {normal: {color: "rgba(51, 69, 89, .5)", //地图背景色borderColor: "#516a89", //省市边界线00fcff 516a89borderWidth: 1,},emphasis: {color: "rgba(37, 43, 61, .5)", //悬浮背景},},},series: series,};this.chart.setOption(option);},},
};
</script>

背景变色

<template><div :class="className" :style="{ height: height, width: width }" />
</template><script>
import * as echarts from "echarts";
import resize from "@/assets/utils/resize.js";
import "@/assets/utils/china.js";export default {name: "BarChart",mixins: [resize],props: {className: {type: String,default: "chart",},width: {type: String,default: "100%",},height: {type: String,default: "100%",},title: {type: String,default: "",},chartData: {type: Object,default: () => {return {};},},},data() {return {chart: null,};},watch: {chartData: function () {this.initChart();},},async mounted() {await this.$nextTick();this.initChart();},beforeDestroy() {if (!this.chart) {return;}this.chart.dispose();this.chart = null;},methods: {initChart() {if (!this.chart) {this.chart = echarts.init(this.$el);}let dataList = [{name: "重庆",value: 347,},{name: "浙江",value: 59,},{name: "云南",value: 115,},{name: "新疆维吾尔自治区",value: 45,},{name: "香港",value: 81,},{name: "西藏自治区",value: 5,},{name: "天津",value: 121,},{name: "四川",value: 23,},{name: "上海",value: 1140,},{name: "陕西",value: 143,},{name: "山西",value: 77,},{name: "山东",value: 209,},{name: "青海",value: 3,},{name: "宁夏回族自治区",value: 1,},{name: "内蒙古自治区",value: 7,},{name: "辽宁",value: 386,},{name: "江西",value: 67,},{name: "江苏",value: 464,},{name: "湖南",value: 6,},{name: "湖北",value: 614,},{name: "黑龙江",value: 53,},{name: "河南",value: 140,},{name: "河北",value: 190,},{name: "海南",value: 24,},{name: "贵州",value: 2,},{name: "广西壮族自治区",value: 77,},{name: "广东",value: 449,},{name: "甘肃",value: 7,},{name: "福建",value: 23,},{name: "北京",value: 603,},{name: "安徽",value: 29,},];let option = {tooltip: {show: true,formatter: function (params) {if (params.value.length > 1) {return "&nbsp;&nbsp;" + params.name + "：" + params.value[2];} else {return "&nbsp;&nbsp;" + params.name + "：" + (params.value || 0);}},},visualMap: {show: false,seriesIndex: [0],inRange: {color: ["#A5DCF4", "#006edd"],},},geo: {map: "china",zoom: 1.2,show: true,roam: false,label: {emphasis: {show: false,},},layoutSize: "100%",itemStyle: {borderColor: "rgba(147, 235, 248, 1)",borderWidth: 2,shadowColor: "rgba(10,76,139,1)",shadowOffsetY: 0,shadowBlur: 60,},},series: [{type: "map",map: "china",aspectScale: 0.75,zoom: 1.2,label: {normal: {show: true,color: "#4dccff",},emphasis: {show: false,},},itemStyle: {normal: {areaColor: {x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0,color: "#073684", // 0% 处的颜色},{offset: 1,color: "#061E3D", // 100% 处的颜色},],},borderColor: "#215495",borderWidth: 1,},emphasis: {areaColor: "#061E3D",},},data: dataList,},],};this.chart.setOption(option);},},
};
</script>