前言
在日常開發中，ECharts 幾乎成了我們繪制數據圖表的標配工具，功能強大到幾乎無所不能。不過每次用的時候都要翻官方文檔查配置項，確實有點小繁瑣 😅
為了提升效率，也方便以后快速復用，這里就整理記錄下我們在實際項目中高頻使用的那些配置項和技巧。
又是我，小二，帶著滿滿的干貨來了！
📌 官網地址（常備不嫌多）：快速上手 - 使用手冊 - Apache ECharts
📌 配置項詳解（ECharts 的“字典”）：Documentation - Apache ECharts
📌 實例演示平臺（靈感源泉）：makeapie echarts社區圖表可視化案例
📌 主題定制器（美化利器）：主題編輯器 - Apache ECharts
一起把 ECharts 用得更順手，讓數據“說話”更有說服力！
樣式
示例
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)' // 終止顏色}]
}你可以設置以下屬性：
- type：設置漸變的類型，固定值為 ‘radial’。
- x、y：設置漸變的中心點坐標，取值范圍為 0~1，其中 (0, 0) 表示左上角，(1, 1) 表示右下角。
- r：設置漸變的半徑，也是相對于整個繪圖區域的半徑，取值范圍為 0~1，1 表示半徑等于繪圖區域的最短邊的一半。
- 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 " " + params.name + "：" + params.value[2];} else {return " " + 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>無論是數據可視化的新手還是經驗豐富的開發者，ECharts 都能成為你探索數據世界的得力助手。希望這些整理的資源和技巧能夠幫助你在項目中更高效地運用 ECharts，讓你的數據講述更加生動有力。
記住，每一次的數據展示都是一次與用戶的對話。通過精心設計的圖表，我們不僅能傳遞信息，更能激發思考、引導決策。期待你在下一個項目中大放異彩，用你的創意點亮每一個數據故事！
繼續加油吧，小伙伴們！如果有任何問題或心得，歡迎隨時交流分享。我們都在這條不斷進步的路上，共同前行！
—— 小二，在評論區等你們能給提一些優秀的意見！！！?
? ? ? ? ? ? ? ? 讓我們鼓勵共勉之
?
