茫茫人海中與你相遇

相信未來的你不會很差

作者：婷醬Yaaa

來源：https://juejin.im/post/5f0292d35188252e5a5dbed0

前言

哈嘍，everybody,我又來了。話不多說，這次給大家帶來的是echarts系列之折線圖，滿滿的干貨。一個小實例讓你對echarts折線圖不再陌生！

剖析你的心

啊呸，錯了，是剖析設計圖。心有啥好剖析的?

簡簡單單的設計圖，那讓我們來分析一下折線圖的細節在哪里：

圖例。今日、昨日、歷史最高。位置在左側。圖標顏色為漸變色，高度大致2px。

Y坐標軸。字體大致為10px,緊貼坐標軸線。

X坐標軸最小值不顯示。

折線圖為區域顯示，并顯示漸變色從左至右。

折現同樣為漸變色，從左至右。

分割線為虛線且有顏色。

繪制圖形

基礎的圖形生成我就不再復述了，不會的同學可以看我的系列第一篇手把手教你玩轉Echarts(一)，這里我就繼續講配置了。

圖例

legend: { right: "3%", top: "5%", textStyle: { color: colors[3], fontSize: 8 }, itemWidth: 15, // 圖例標記的圖形寬度 itemHeight: 3, // 圖例標記的圖形高度 icon: "rect", // 圖例形狀為方形 data: ["今日", "昨日", "歷史最高"] // 圖例的數據數組},

Y坐標軸

yAxis: [{ type: "value", axisLine: { // 坐標軸線的配置 show: false, lineStyle: { // 軸線樣式 color: colors[3] } }, splitLine: { // y軸分割線配置 show: true, lineStyle: { // 分割線樣式 type: 'dashed', // 虛線 color: '#1e47697d' } }, axisTick: { // 軸線上的刻度線配置 show: false }, axisLabel: { fontSize: 8, formatter: v => { return v >= 1000 ? v / 1000 + "k" : v; } }}],微說下axisLabel.formatter，其實這里很靈活，支持字符串模板和回調函數兩種形式，可以是string或者Function.其實是對刻度值的一個格式化。官方例子在這里

X坐標軸

xAxis: [ { type: "category", boundaryGap: false, axisLine: { lineStyle: { color: colors[3] } }, axisLabel: { // 坐標軸刻度設置 fontSize: 8, margin: 4, // 距離坐標軸的距離 }, axisTick: { // 是否顯示刻度 show: false }, data: [] // 數據數組，可以異步獲取賦值 }],

漸變色

1.先引入echarts

import echarts from "echarts";

2.定義色彩數組，也就是取色盤。

const colors = [ new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 四個位置依次為左、下、右、上, 為逆時針。所以這里為橫向漸變 { offset: 0, color: "#504DFF" }, { offset: 1, color: "#91E6FF" } ]), "#A2C6E0", "#1e47697d"];

3.配置series

// ... series: [ { name: "今日", // 系列名稱，用于tooltip的顯示, 與legend的data是相對應的 type: "line", // 類型，是折線還是柱子還是其他的 // stack: "總量", // 是否顯示圖形堆疊 color: colors[0], // 這里是指對應折線`line`的顏色 areaStyle: { opacity: ".3", color: colors[0] // 一個顏色數組中的某個值 }, symbol: "none", // 標記的圖形 smooth: false, // 是否平滑曲線顯示 data: [120, 132, 101, 134, 90, 230, 210] // 對應x軸上的value值 }, // ... ]

完整配置

export default { inject: ['queryD'], data() { return { option: {...option}, timer: null }; }, mounted() { this.initChart(); this.getVolumn(); window.addEventListener("resize", this.initChart); this.timer = setInterval(this.getVolumn, this.$store.state.demo.time) }, methods: { initChart() { let myChart = echarts.init(document.getElementById("hourTrend")); myChart.setOption(this.option); myChart.resize(); }, async getVolumn() { try { const res = await this.$axios.post("/api/weightHourInfo", JSON.parse(this.queryD)); // 這段代碼如果有可優化的地方，請告知。反正我也不會承認自己菜的! ? if (res.data && res.data.data) { const arr = res.data.data; this.option.xAxis[0].data = []; this.option.series[0].data = []; this.option.series[1].data = []; this.option.series[2].data = []; arr.forEach(el => { this.option.xAxis[0].data.push(el.hour); this.option.series[0].data.push(el.chargeableWeight); this.option.series[1].data.push(el.chargeableWeightYest); this.option.series[2].data.push(el.chargeableWeight9); }); this.initChart(); } } finally { } } }, destroyed() { window.removeEventListener("resize", this.initChart); clearInterval(this.timer) }};

小結

這里不清楚大家是否有仔細看里面的配置，其實都有很多的相似點，比如：
x軸、y軸都可以設置name、axisLine、axisLabel、axisTick、color等等，這些都是有規律可循的，然后根據不同的類型在series設置不同的個性化配置。

寫在最后

文筆垃圾，也沒有覺得自己很厲害。都是基礎的文章，寫給自己的，也給一些么有接觸過的同學一點方向。當然，還是那句廢話“如果對你有用的話，記得給小仙女點個贊喲”?

我們在虛擬的空間與你相遇，期待可以碰撞出不一樣的火花

公眾號ID：前端大聯盟掃碼關注最新動態

總結

以上是生活随笔為你收集整理的echarts formatter_手把手教你玩转echarts(二)折线图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。