當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Echarts富文本rich及格式化工具formatter的使用

發布時間：2024/7/5 编程问答 59 豆豆

生活随笔收集整理的這篇文章主要介紹了 Echarts富文本rich及格式化工具formatter的使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

??????? Echarts官網上說，ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。

??????? ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

??????? 除了已經內置的包含了豐富功能的圖表，ECharts 還提供了自定義系列，只需要傳入一個renderItem函數，就可以從數據映射到任何你想要的圖形，更棒的是這些都還能和已有的交互組件結合使用而不需要操心其它事情。

??????? Echarts官網上提供的實例幾乎滿足實際開發需求，有時未免有些特殊的需求，還好Echarts官網上提供豐富的開發文檔。通過仔細閱讀文檔終究會想到解決方法。

??????? 今天主要總結一下關于Echarts可視化組件開發中的富文本，官方文檔對富文本的解釋如下：　

????????????? 原先 echarts 中的文本標簽，只能對整塊統一進行樣式設置，并且僅僅支持顏色和字體的設置，從而導致不易于制作表達能力更強的文字描述信息。

????????????? echarts v3.7 以后，支持了富文本標簽，能夠：

定制文本塊整體的樣式（如背景、邊框、陰影等）、位置、旋轉等。
對文本塊中個別片段定義樣式（如顏色、字體、高寬、背景、陰影等）、對齊方式等。
在文本中使用圖片做小圖標或者背景。
特定組合以上的規則，可以做出簡單表格、分割線等效果。

開始下面的介紹之前，先說明一下下面會使用的兩個名詞的含義：

文本塊（Text Block）：文本標簽塊整體。
文本片段（Text Fregment）：文本標簽塊中的部分文本。

文本樣式相關的配置項

echarts 提供了豐富的文本標簽配置項，包括：

字體基本樣式設置：fontStyle、fontWeight、fontSize、fontFamily。
文字顏色：color。
文字描邊：textBorderColor、textBorderWidth。
文字陰影：textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY。
文本塊或文本片段大小：lineHeight、width、height、padding。
文本塊或文本片段的對齊：align、verticalAlign。
文本塊或文本片段的邊框、背景（顏色或圖片）：backgroundColor、borderColor、borderWidth、borderRadius。
文本塊或文本片段的陰影：shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。
文本塊的位置和旋轉：position、distance、rotate。

可以在各處的 rich 屬性中定義文本片段樣式。例如 series-bar.label.rich

例如：

label: { // 在文本中，可以對部分文本采用 rich 中定義樣式。 // 這里需要在文本中使用標記符號： // `{styleName|text content text content}` 標記樣式名。 // 注意，換行仍是使用 '\n'。 formatter: [ '{a|這段文本采用樣式a}', '{b|這段文本采用樣式b}這段用默認樣式{x|這段用樣式x}' ].join('\n'), // 這里是文本塊的樣式設置： color: '#333', fontSize: 5, fontFamily: 'Arial', borderWidth: 3, backgroundColor: '#984455', padding: [3, 10, 10, 5], lineHeight: 20, // rich 里是文本片段的樣式設置： rich: { a: { color: 'red', lineHeight: 10 }, b: { backgroundColor: { image: 'xxx/xxx.jpg' }, height: 40 }, x: { fontSize: 18, fontFamily: 'Microsoft YaHei', borderColor: '#449933', borderRadius: 4 }, ... } }

注意：如果不定義 rich，不能指定文字塊的 width 和 height。

文本、文本框、文本片段的基本樣式和裝飾

每個文本可以設置基本的字體樣式：fontStyle、fontWeight、fontSize、fontFamily。

可以設置文字的顏色 color 和邊框的顏色 textBorderColor、textBorderWidth。

文本框可以設置邊框和背景的樣式：borderColor、borderWidth、backgroundColor、padding。

文本片段也可以設置邊框和背景的樣式：borderColor、borderWidth、backgroundColor、padding。

例如：

標簽的位置

對于折線圖、柱狀圖、散點圖等，均可以使用 label 來設置標簽。標簽的相對于圖形元素的位置，一般使用 label.position、label.distance 來配置。

例如：

注意：position 在不同的圖中可取值有所不同。distance 并不是在每個圖中都支持。詳情請參見 option 文檔。

標簽的旋轉

某些圖中，為了能有足夠長的空間來顯示標簽，需要對標簽進行旋轉。例如：

這種場景下，可以結合 align 和 verticalAlign 來調整標簽位置。

注意，邏輯是，先使用 align 和 verticalAlign 定位，再旋轉。

文本片段的排版和對齊

關于排版方式，每個文本片段，可以想象成 CSS 中的 inline-block，在文檔流中按行放置。

每個文本片段的內容盒尺寸（content box size），默認是根據文字大小決定的。但是，也可以設置 width、height 來強制指定，雖然一般不會這么做（參見下文）。文本片段的邊框盒尺寸（border box size），由上述本身尺寸，加上文本片段的 padding 來得到。

只有 '\n' 是換行符，能導致換行。

一行內，會有多個文本片段。每行的實際高度，由 lineHeight 最大的文本片段決定。文本片段的 lineHeight 可直接在 rich 中指定，也可以在 rich 的父層級中統一指定而采用到 rich 的所有項中，如果都不指定，則取文本片段的邊框盒尺寸（border box size）。

在一行的 lineHeight 被決定后，一行內，文本片段的豎直位置，由文本片段的 verticalAlign 來指定（這里和 CSS 中的規則稍有不同）：

'bottom'：文本片段的盒的底邊貼住行底。
'top'：文本片段的盒的頂邊貼住行頂。
'middle'：居行中。

文本塊的寬度，可以直接由文本塊的 width 指定，否則，由最長的行決定。寬度決定后，在一行中進行文本片段的放置。文本片段的 align 決定了文本片段在行中的水平位置：

首先，從左向右連續緊靠放置 align 為 'left' 的文本片段盒。
然后，從右向左連續緊靠放置 align 為 'right' 的文本片段盒。
最后，剩余的沒處理的文本片段盒，緊貼著，在中間剩余的區域中居中放置。

關于文字在文本片段盒中的位置：

如果 align 為 'center'，則文字在文本片段盒中是居中的。
如果 align 為 'left'，則文字在文本片段盒中是居左的。
如果 align 為 'right'，則文字在文本片段盒中是居右的。

例如：

特殊效果：圖標、分割線、標題塊、簡單表格

看下面的例子：

文本片段的 backgroundColor 可以指定為圖片后，就可以在文本中使用圖標了：

rich: { Sunny: { // 這樣設定 backgroundColor 就可以是圖片了。 backgroundColor: { image: './data/asset/img/weather/sunny_128.png' }, // 可以只指定圖片的高度，從而圖片的寬度根據圖片的長寬比自動得到。 height: 30 } }

分割線實際是用 border 實現的：

rich: { hr: { borderColor: '#777', // 這里把 width 設置為 '100%'，表示分割線的長度充滿文本塊。 // 注意，這里是文本塊內容盒（content box）的 100%，而不包含 padding。 // 雖然這和 CSS 相關的定義有所不同，但是在這類場景中更加方便。 width: '100%', borderWidth: 0.5, height: 0 } }

標題塊是使用 backgroundColor 實現的：

// 標題文字居左 formatter: '{titleBg|Left Title}', rich: { titleBg: { backgroundColor: '#000', height: 30, borderRadius: [5, 5, 0, 0], padding: [0, 10, 0, 10], width: '100%', color: '#eee' } } // 標題文字居中。 // 這個實現有些 tricky，但是，能夠不引入更復雜的排版規則而實現這個效果。 formatter: '{tc|Center Title}{titleBg|}', rich: { titleBg: { align: 'right', backgroundColor: '#000', height: 30, borderRadius: [5, 5, 0, 0], padding: [0, 10, 0, 10], width: '100%', color: '#eee' } }

下面直接貼上實例代碼和GitHub連接
Demo1 對echarts的title使用富文本，對其格式化
01（這個title是固定的）
效果圖：

<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>ECharts</title>  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.common.js"></script> </head>
<bod>  <div id="main" style="width: 900px;height:600px;"></div> <script type="text/javascript"> // 基于準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據 var data = [2220, 1682, 2791, 3000, 4090, 3230, 2910]; var xdata = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; var option = { color: ['#3398DB'], tooltip: { trigger: 'axis', }, grid: { top: '10%', containLabel: true }, title: { /* text: 'subtextStyle.rich使用', */ subtext: '{a|名稱：}{b|供水統計}', left: 'center', textStyle: { fontSize: 20 }, subtextStyle: { rich: { a: { //開頭和結尾的文字樣式 color: 'gray', fontSize: 18 }, b: { /* backgroundColor: 'pink', */ //無法設置漸變色 color: 'green', padding: [3, 8], fontSize: 16, fontWeight: 600, /* borderColor: '#0b4d9d', borderWidth: 1, */ } } } }, xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } }], yAxis: [{ type: 'value' }], series: [{ name: '直接訪問', type: 'bar', barWidth: '60%', data: [10, 52, 200, 334, 390, 330, 220] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body>
</html> 01（這個title是動態的）效果圖： <!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>ECharts</title>  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.common.js"></script> </head>
<bod>  <div id="main" style="width: 900px;height:600px;"></div> <script type="text/javascript"> // 基于準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); var timename = "時間" var time = "18:08:08" // 指定圖表的配置項和數據 var data = [2220, 1682, 2791, 3000, 4090, 3230, 2910]; var xdata = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; var option = { color: ['#3398DB'], tooltip: { trigger: 'axis', }, grid: { top: '10%', containLabel: true }, title: { subtext: "{" + "a" + "|" + timename + "}" + "{" + "b" + "|" + time + "}", left: 'center', textStyle: { fontSize: 20 }, subtextStyle: { rich: { a: { //開頭和結尾的文字樣式 color: 'gray', fontSize: 18 }, b: { color: 'green', padding: [3, 8], fontSize: 16, fontWeight: 600, } } } }, xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } }], yAxis: [{ type: 'value' }], series: [{ name: '直接訪問', type: 'bar', barWidth: '60%', data: [10, 52, 200, 334, 390, 330, 220] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body>
</html> demo2 在vue使用echarts,修改 tooltip 效果圖：

代碼《01》

<template> <div> <div id="main4"></div> </div> </template> <script> export default { name: "Echarts2", data() { return { Datatime14: [], DataWaterRealUnitConsumptionnum14: [], DataWaterForcastUnitConsumptionnum14: [], Datamarkred14: [], DataMaxDatanum14: [], Datanum14: [], Datamarkred14top: [], bjstimer4: null }; }, mounted() { let that = this; that.request(); },
methods: { request() { var _this = this; var msg= {"BCtWaterUnitConsumption":369.6461,"CtWaterUnitConsumption":0,"MaxData":776.25690484946767,"WaterForcastUnitConsumption":[{"Data":362.9547,"Time":"00:00:00","Type":0},{"Data":360.6984,"Time":"00:15:00","Type":0},{"Data":363.2329,"Time":"00:30:00","Type":0},{"Data":363.1301,"Time":"00:45:00","Type":0},{"Data":359.9166,"Time":"01:00:00","Type":0},{"Data":363.332,"Time":"01:15:00","Type":0},{"Data":362.3297,"Time":"01:30:00","Type":0},{"Data":360.9614,"Time":"01:45:00","Type":0},{"Data":359.6568,"Time":"02:00:00","Type":0},{"Data":359.0653,"Time":"02:15:00","Type":0},{"Data":357.4453,"Time":"02:30:00","Type":0},{"Data":355.9816,"Time":"02:45:00","Type":0},{"Data":354.3747,"Time":"03:00:00","Type":0},{"Data":352.9428,"Time":"03:15:00","Type":0},{"Data":351.5586,"Time":"03:30:00","Type":0},{"Data":349.9676,"Time":"03:45:00","Type":0},{"Data":349.3789,"Time":"04:00:00","Type":0},{"Data":347.9629,"Time":"04:15:00","Type":0},{"Data":346.4833,"Time":"04:30:00","Type":0},{"Data":345.2582,"Time":"04:45:00","Type":0},{"Data":343.9858,"Time":"05:00:00","Type":0},{"Data":342.6171,"Time":"05:15:00","Type":0},{"Data":341.2137,"Time":"05:30:00","Type":0},{"Data":339.7374,"Time":"05:45:00","Type":0},{"Data":338.1941,"Time":"06:00:00","Type":0},{"Data":336.6827,"Time":"06:15:00","Type":0},{"Data":331.4004,"Time":"06:30:00","Type":0},{"Data":328.4645,"Time":"06:45:00","Type":0},{"Data":330.2028,"Time":"07:00:00","Type":0},{"Data":325.8771,"Time":"07:15:00","Type":0},{"Data":328.5522,"Time":"07:30:00","Type":0},{"Data":330.5124,"Time":"07:45:00","Type":0},{"Data":330.3464,"Time":"08:00:00","Type":0},{"Data":333.293,"Time":"08:15:00","Type":0},{"Data":332.2695,"Time":"08:30:00","Type":0},{"Data":335.3607,"Time":"08:45:00","Type":0},{"Data":335.2552,"Time":"09:00:00","Type":0},{"Data":335.2558,"Time":"09:15:00","Type":0},{"Data":336.6607,"Time":"09:30:00","Type":0},{"Data":336.4277,"Time":"09:45:00","Type":0},{"Data":337.7365,"Time":"10:00:00","Type":0},{"Data":337.4455,"Time":"10:15:00","Type":0},{"Data":339.2552,"Time":"10:30:00","Type":0},{"Data":339.0848,"Time":"10:45:00","Type":0},{"Data":339.8569,"Time":"11:00:00","Type":0},{"Data":339.9649,"Time":"11:15:00","Type":0},{"Data":340.0957,"Time":"11:30:00","Type":0},{"Data":340.738,"Time":"11:45:00","Type":0},{"Data":341.5738,"Time":"12:00:00","Type":0},{"Data":342.1352,"Time":"12:15:00","Type":0},{"Data":341.8438,"Time":"12:30:00","Type":0},{"Data":342.2098,"Time":"12:45:00","Type":0},{"Data":343.7514,"Time":"13:00:00","Type":0},{"Data":343.0101,"Time":"13:15:00","Type":0},{"Data":346.3281,"Time":"13:30:00","Type":0},{"Data":347.3826,"Time":"13:45:00","Type":0},{"Data":348.6347,"Time":"14:00:00","Type":0},{"Data":348.8486,"Time":"14:15:00","Type":0},{"Data":346.5973,"Time":"14:30:00","Type":0},{"Data":346.7559,"Time":"14:45:00","Type":0},{"Data":346.4899,"Time":"15:00:00","Type":0},{"Data":344.2002,"Time":"15:15:00","Type":0},{"Data":343.5149,"Time":"15:30:00","Type":0},{"Data":346.3243,"Time":"15:45:00","Type":0},{"Data":343.2917,"Time":"16:00:00","Type":0},{"Data":343.4204,"Time":"16:15:00","Type":0},{"Data":342.4683,"Time":"16:30:00","Type":0},{"Data":341.7943,"Time":"16:45:00","Type":0},{"Data":342.6641,"Time":"17:00:00","Type":0},{"Data":343.2705,"Time":"17:15:00","Type":0},{"Data":341.2998,"Time":"17:30:00","Type":0},{"Data":344.0632,"Time":"17:45:00","Type":0},{"Data":344.623,"Time":"18:00:00","Type":0},{"Data":344.8369,"Time":"18:15:00","Type":0},{"Data":346.6588,"Time":"18:30:00","Type":0},{"Data":346.2391,"Time":"18:45:00","Type":0},{"Data":346.1565,"Time":"19:00:00","Type":0},{"Data":346.1591,"Time":"19:15:00","Type":0},{"Data":346.9922,"Time":"19:30:00","Type":0},{"Data":348.2123,"Time":"19:45:00","Type":0},{"Data":349.4399,"Time":"20:00:00","Type":0},{"Data":350.8944,"Time":"20:15:00","Type":0},{"Data":351.2439,"Time":"20:30:00","Type":0},{"Data":352.8311,"Time":"20:45:00","Type":0},{"Data":353.284,"Time":"21:00:00","Type":0},{"Data":353.9928,"Time":"21:15:00","Type":0},{"Data":354.2663,"Time":"21:30:00","Type":0},{"Data":355.0968,"Time":"21:45:00","Type":0},{"Data":355.7013,"Time":"22:00:00","Type":0},{"Data":356.9886,"Time":"22:15:00","Type":0},{"Data":359.8441,"Time":"22:30:00","Type":0},{"Data":358.2381,"Time":"22:45:00","Type":0},{"Data":356.2934,"Time":"23:00:00","Type":0},{"Data":360.339,"Time":"23:15:00","Type":0},{"Data":361.7268,"Time":"23:30:00","Type":0},{"Data":361.6662,"Time":"23:45:00","Type":0}],"WaterRealUnitConsumption":[{"Data":369.65,"Time":"00:00:00","Type":0},{"Data":367.99,"Time":"00:15:00","Type":0},{"Data":366.52,"Time":"00:30:00","Type":0},{"Data":365.8,"Time":"00:45:00","Type":0},{"Data":365.58,"Time":"01:00:00","Type":0},{"Data":363.02,"Time":"01:15:00","Type":0},{"Data":359.55,"Time":"01:30:00","Type":0},{"Data":358.59,"Time":"01:45:00","Type":0},{"Data":357.36,"Time":"02:00:00","Type":0},{"Data":355.72,"Time":"02:15:00","Type":0},{"Data":353.18,"Time":"02:30:00","Type":0},{"Data":351.04,"Time":"02:45:00","Type":0},{"Data":350.64,"Time":"03:00:00","Type":0},{"Data":347.82,"Time":"03:15:00","Type":0},{"Data":344.98,"Time":"03:30:00","Type":0},{"Data":343.71,"Time":"03:45:00","Type":0},{"Data":342.97,"Time":"04:00:00","Type":0},{"Data":341.64,"Time":"04:15:00","Type":0},{"Data":340.12,"Time":"04:30:00","Type":0},{"Data":337.44,"Time":"04:45:00","Type":0},{"Data":335.96,"Time":"05:00:00","Type":0},{"Data":333.18,"Time":"05:15:00","Type":0},{"Data":331.69,"Time":"05:30:00","Type":0},{"Data":328.68,"Time":"05:45:00","Type":0},{"Data":324.76,"Time":"06:00:00","Type":0},{"Data":322.81,"Time":"06:15:00","Type":0},{"Data":321.16,"Time":"06:30:00","Type":0},{"Data":321.61,"Time":"06:45:00","Type":0},{"Data":320.78,"Time":"07:00:00","Type":0},{"Data":319.95,"Time":"07:15:00","Type":0},{"Data":327.16,"Time":"07:30:00","Type":0},{"Data":325.33,"Time":"07:45:00","Type":0},{"Data":326.77,"Time":"08:00:00","Type":0},{"Data":329.21,"Time":"08:15:00","Type":0},{"Data":328.78,"Time":"08:30:00","Type":0},{"Data":333.78,"Time":"08:45:00","Type":0},{"Data":335.49,"Time":"09:00:00","Type":0},{"Data":0,"Time":"09:15:00","Type":0},{"Data":339.03,"Time":"09:30:00","Type":0},{"Data":341.42,"Time":"09:45:00","Type":0},{"Data":341.88,"Time":"10:00:00","Type":0},{"Data":343.24,"Time":"10:15:00","Type":0},{"Data":344.38,"Time":"10:30:00","Type":0},{"Data":347.14,"Time":"10:45:00","Type":0},{"Data":345.67,"Time":"11:00:00","Type":0},{"Data":346.5,"Time":"11:15:00","Type":0},{"Data":346.99,"Time":"11:30:00","Type":0},{"Data":347.4,"Time":"11:45:00","Type":0},{"Data":0,"Time":"12:00:00","Type":0},{"Data":346.14,"Time":"12:15:00","Type":0},{"Data":346.04,"Time":"12:30:00","Type":0},{"Data":345.05,"Time":"12:45:00","Type":0},{"Data":345.16,"Time":"13:00:00","Type":0},{"Data":344.13,"Time":"13:15:00","Type":0},{"Data":344.36,"Time":"13:30:00","Type":0},{"Data":345.04,"Time":"13:45:00","Type":0},{"Data":344.92,"Time":"14:00:00","Type":0},{"Data":344.03,"Time":"14:15:00","Type":0}]} var MaxData14 = msg.MaxData; //最大值 var WaterForcastUnitConsumption14 = msg.WaterForcastUnitConsumption; //預測曲線 var WaterRealUnitConsumption14 = msg.WaterRealUnitConsumption; //實際曲線 var time14 = []; var num14 = []; var markred14 = []; var markred14top=[] var MaxDatanum14 = []; //最大值 var WaterForcastUnitConsumptionnum14 = []; //預測曲線 var WaterRealUnitConsumptionnum14 = []; //實際曲線 for (var i = 0; i < WaterForcastUnitConsumption14.length; i++) { WaterForcastUnitConsumptionnum14.push(WaterForcastUnitConsumption14[i].Data); time14.push(WaterForcastUnitConsumption14[i].Time); MaxDatanum14.push(MaxData14); num14.push(MaxData14/30); } for (var i = 0; i < WaterRealUnitConsumption14.length; i++) { WaterRealUnitConsumptionnum14.push(WaterRealUnitConsumption14[i].Data); } for (var i = 0; i < WaterRealUnitConsumption14.length-1; i++) { markred14.push(0); markred14top.push(0); } markred14.push(WaterRealUnitConsumptionnum14[WaterRealUnitConsumptionnum14.length - 1]); markred14top.push(MaxData14/30); _this.Datatime14 = time14; _this.DataWaterRealUnitConsumptionnum14 = WaterRealUnitConsumptionnum14; _this.DataWaterForcastUnitConsumptionnum14 = WaterForcastUnitConsumptionnum14; _this.Datamarkred14 = markred14; _this.Datamarkred14top = markred14top; _this.Datanum14 = num14 _this.DataMaxDatanum14 = MaxDatanum14; _this.drawLine();
}, drawLine() { // 基于準備好的dom，初始化echarts實例 let myChart = this.$echarts.init(document.getElementById("main4")); // 繪制圖表 myChart.setOption({ grid: { height: 84, width: 760, bottom: 10, top: 35, right: 1, left: 51 }, color: ["#a9b2bf", "#0060ff", "#b53f9a"], legend: { right: 5, width: 500, itemWidth: 40, textStyle: { color: "#6e7b8b" }, data: ["歷史值", "預測值"], icon: "rect", //? 這個字段控制形狀? 類型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 14, // 設置寬度
itemHeight: 14, // 設置高度
itemGap: 40 // 設置間距 }, tooltip: { trigger: "axis", padding: [0, 10], formatter: function(params) { /* console.log(params) */ var res = "<div> <p> 時間：" + params[0].name + " </p> </div>"; for (var i = 0; i < params.length; i++) { if (params[i].seriesName == "歷史值") { res += "<p>" + params[i].seriesName + ":" + params[i].data + "</p>"; } else if(params[i].seriesIndex == 3){ res += "<p>" + "預測值" + ":" + params[i].data + "</p>"; } /* res += "<p>" + params[i].seriesName + ":" + params[i].data + "</p>"; */ } return res; }, textStyle: { align: "left" } }, xAxis: [ { data: this.Datatime14, axisLabel: { inside: false, textStyle: { color: "#fff" } }, axisTick: { show: false }, axisLine: { show: false }, z: 10 } ], yAxis: { splitLine: { show: false, lineStyle: { color: "#dfdfdf", width: 1, type: "dashed" } }, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { textStyle: { color: "#999" } } }, series: [ { name: "歷史值", type: "bar", barWidth: 6, data: this.DataWaterRealUnitConsumptionnum14, zlevel: 99, itemStyle: { normal: { color: "#a9b2bf" } } }, { type: "bar", stack: '標記', barWidth: 6, data:this.Datamarkred14, zlevel: 199, itemStyle: { normal: { color: "red", }, }, tooltip:{ show:false } }, { type: "bar", stack: '標記', barWidth: 6, data:this.Datamarkred14top, zlevel: 199, itemStyle: { normal: { color: "red", }, }, tooltip:{ show:false } },
{ type: "bar", stack: "總量", barWidth: 6, itemStyle: { normal: { color: "rgba(229,235,236,0)" } }, zlevel: 1333, // Make series be overlap /* barGap: '-100%', */ data: this.DataWaterForcastUnitConsumptionnum14 }, { name: "預測值", type: "bar", barWidth: 6, stack: "總量", itemStyle: { normal: { color: "#0060ff" } }, zlevel: 1333, data: this.Datanum14 }, { type: "bar", barWidth: 6, itemStyle: { normal: { color: "#e5ebec" } }, barGap: "-100%", data: this.DataMaxDatanum14 } ] }); } }, beforeDestroy() { clearInterval(this.bjstimer4); this.bjstimer4 = null; } }; </script> <style scoped> #main4 { width: 820px; height: 134px; margin-left: 20px;
/* border: 1px red solid; */ } </style> 代碼《02》

<template> <div> <div id="main5"></div> </div> </template> <script> export default { name: "Echarts2", data() { return { Datatime15: [], DataWaterRealTotalEfficiencynum15: [], DataWaterForcastTotalEfficiencynum15: [], Datamarkred15: [], DataMaxDatanum15: [], Datanum15: [], Datamarkred15top: [], bjstimer5: null }; }, mounted() { let that = this; that.request(); },
methods: { request() { var _this = this; var msg = { CtWaterTotalEfficiency: 0, HighestTotalEfficiency: 73, LowestTotalEfficiency: 73, MaxData: 100, WaterForcastTotalEfficiency: [ { Data: 73, Time: "00:00:00", Type: 0 }, { Data: 73, Time: "00:15:00", Type: 0 }, { Data: 73, Time: "00:30:00", Type: 0 }, { Data: 73, Time: "00:45:00", Type: 0 }, { Data: 73, Time: "01:00:00", Type: 0 }, { Data: 73, Time: "01:15:00", Type: 0 }, { Data: 73, Time: "01:30:00", Type: 0 }, { Data: 73, Time: "01:45:00", Type: 0 }, { Data: 73, Time: "02:00:00", Type: 0 }, { Data: 73, Time: "02:15:00", Type: 0 }, { Data: 73, Time: "02:30:00", Type: 0 }, { Data: 73, Time: "02:45:00", Type: 0 }, { Data: 73, Time: "03:00:00", Type: 0 }, { Data: 73, Time: "03:15:00", Type: 0 }, { Data: 73, Time: "03:30:00", Type: 0 }, { Data: 73, Time: "03:45:00", Type: 0 }, { Data: 73, Time: "04:00:00", Type: 0 }, { Data: 73, Time: "04:15:00", Type: 0 }, { Data: 73, Time: "04:30:00", Type: 0 }, { Data: 73, Time: "04:45:00", Type: 0 }, { Data: 73, Time: "05:00:00", Type: 0 }, { Data: 73, Time: "05:15:00", Type: 0 }, { Data: 73, Time: "05:30:00", Type: 0 }, { Data: 73, Time: "05:45:00", Type: 0 }, { Data: 73, Time: "06:00:00", Type: 0 }, { Data: 73, Time: "06:15:00", Type: 0 }, { Data: 73, Time: "06:30:00", Type: 0 }, { Data: 73, Time: "06:45:00", Type: 0 }, { Data: 73, Time: "07:00:00", Type: 0 }, { Data: 73, Time: "07:15:00", Type: 0 }, { Data: 73, Time: "07:30:00", Type: 0 }, { Data: 73, Time: "07:45:00", Type: 0 }, { Data: 73, Time: "08:00:00", Type: 0 }, { Data: 73, Time: "08:15:00", Type: 0 }, { Data: 73, Time: "08:30:00", Type: 0 }, { Data: 73, Time: "08:45:00", Type: 0 }, { Data: 73, Time: "09:00:00", Type: 0 }, { Data: 73, Time: "09:15:00", Type: 0 }, { Data: 73, Time: "09:30:00", Type: 0 }, { Data: 73, Time: "09:45:00", Type: 0 }, { Data: 73, Time: "10:00:00", Type: 0 }, { Data: 73, Time: "10:15:00", Type: 0 }, { Data: 73, Time: "10:30:00", Type: 0 }, { Data: 73, Time: "10:45:00", Type: 0 }, { Data: 73, Time: "11:00:00", Type: 0 }, { Data: 73, Time: "11:15:00", Type: 0 }, { Data: 73, Time: "11:30:00", Type: 0 }, { Data: 73, Time: "11:45:00", Type: 0 }, { Data: 73, Time: "12:00:00", Type: 0 }, { Data: 73, Time: "12:15:00", Type: 0 }, { Data: 73, Time: "12:30:00", Type: 0 }, { Data: 73, Time: "12:45:00", Type: 0 }, { Data: 73, Time: "13:00:00", Type: 0 }, { Data: 73, Time: "13:15:00", Type: 0 }, { Data: 73, Time: "13:30:00", Type: 0 }, { Data: 73, Time: "13:45:00", Type: 0 }, { Data: 73, Time: "14:00:00", Type: 0 }, { Data: 73, Time: "14:15:00", Type: 0 }, { Data: 73, Time: "14:30:00", Type: 0 }, { Data: 73, Time: "14:45:00", Type: 0 }, { Data: 73, Time: "15:00:00", Type: 0 }, { Data: 73, Time: "15:15:00", Type: 0 }, { Data: 73, Time: "15:30:00", Type: 0 }, { Data: 73, Time: "15:45:00", Type: 0 }, { Data: 73, Time: "16:00:00", Type: 0 }, { Data: 73, Time: "16:15:00", Type: 0 }, { Data: 73, Time: "16:30:00", Type: 0 }, { Data: 73, Time: "16:45:00", Type: 0 }, { Data: 73, Time: "17:00:00", Type: 0 }, { Data: 73, Time: "17:15:00", Type: 0 }, { Data: 73, Time: "17:30:00", Type: 0 }, { Data: 73, Time: "17:45:00", Type: 0 }, { Data: 73, Time: "18:00:00", Type: 0 }, { Data: 73, Time: "18:15:00", Type: 0 }, { Data: 73, Time: "18:30:00", Type: 0 }, { Data: 73, Time: "18:45:00", Type: 0 }, { Data: 73, Time: "19:00:00", Type: 0 }, { Data: 73, Time: "19:15:00", Type: 0 }, { Data: 73, Time: "19:30:00", Type: 0 }, { Data: 73, Time: "19:45:00", Type: 0 }, { Data: 73, Time: "20:00:00", Type: 0 }, { Data: 73, Time: "20:15:00", Type: 0 }, { Data: 73, Time: "20:30:00", Type: 0 }, { Data: 73, Time: "20:45:00", Type: 0 }, { Data: 73, Time: "21:00:00", Type: 0 }, { Data: 73, Time: "21:15:00", Type: 0 }, { Data: 73, Time: "21:30:00", Type: 0 }, { Data: 73, Time: "21:45:00", Type: 0 }, { Data: 73, Time: "22:00:00", Type: 0 }, { Data: 73, Time: "22:15:00", Type: 0 }, { Data: 73, Time: "22:30:00", Type: 0 }, { Data: 73, Time: "22:45:00", Type: 0 }, { Data: 73, Time: "23:00:00", Type: 0 }, { Data: 73, Time: "23:15:00", Type: 0 }, { Data: 73, Time: "23:30:00", Type: 0 }, { Data: 73, Time: "23:45:00", Type: 0 } ], WaterRealTotalEfficiency: [ { Data: 73, Time: "00:00:00", Type: 0 }, { Data: 73, Time: "00:15:00", Type: 0 }, { Data: 73, Time: "00:30:00", Type: 0 }, { Data: 73, Time: "00:45:00", Type: 0 }, { Data: 73, Time: "01:00:00", Type: 0 }, { Data: 73, Time: "01:15:00", Type: 0 }, { Data: 73, Time: "01:30:00", Type: 0 }, { Data: 73, Time: "01:45:00", Type: 0 }, { Data: 73, Time: "02:00:00", Type: 0 }, { Data: 73, Time: "02:15:00", Type: 0 }, { Data: 73, Time: "02:30:00", Type: 0 }, { Data: 73, Time: "02:45:00", Type: 0 }, { Data: 73, Time: "03:00:00", Type: 0 }, { Data: 73, Time: "03:15:00", Type: 0 }, { Data: 73, Time: "03:30:00", Type: 0 }, { Data: 73, Time: "03:45:00", Type: 0 }, { Data: 73, Time: "04:00:00", Type: 0 }, { Data: 73, Time: "04:15:00", Type: 0 }, { Data: 73, Time: "04:30:00", Type: 0 }, { Data: 73, Time: "04:45:00", Type: 0 }, { Data: 73, Time: "05:00:00", Type: 0 }, { Data: 73, Time: "05:15:00", Type: 0 }, { Data: 73, Time: "05:30:00", Type: 0 }, { Data: 73, Time: "05:45:00", Type: 0 }, { Data: 73, Time: "06:00:00", Type: 0 }, { Data: 73, Time: "06:15:00", Type: 0 }, { Data: 73, Time: "06:30:00", Type: 0 }, { Data: 73, Time: "06:45:00", Type: 0 }, { Data: 73, Time: "07:00:00", Type: 0 }, { Data: 73, Time: "07:15:00", Type: 0 }, { Data: 73, Time: "07:30:00", Type: 0 }, { Data: 73, Time: "07:45:00", Type: 0 }, { Data: 73, Time: "08:00:00", Type: 0 }, { Data: 73, Time: "08:15:00", Type: 0 }, { Data: 73, Time: "08:30:00", Type: 0 }, { Data: 73, Time: "08:45:00", Type: 0 }, { Data: 73, Time: "09:00:00", Type: 0 }, { Data: 0, Time: "09:15:00", Type: 0 }, { Data: 73, Time: "09:30:00", Type: 0 }, { Data: 73, Time: "09:45:00", Type: 0 }, { Data: 73, Time: "10:00:00", Type: 0 }, { Data: 73, Time: "10:15:00", Type: 0 }, { Data: 73, Time: "10:30:00", Type: 0 }, { Data: 73, Time: "10:45:00", Type: 0 }, { Data: 73, Time: "11:00:00", Type: 0 }, { Data: 73, Time: "11:15:00", Type: 0 }, { Data: 73, Time: "11:30:00", Type: 0 }, { Data: 73, Time: "11:45:00", Type: 0 }, { Data: 0, Time: "12:00:00", Type: 0 }, { Data: 73, Time: "12:15:00", Type: 0 }, { Data: 73, Time: "12:30:00", Type: 0 }, { Data: 73, Time: "12:45:00", Type: 0 }, { Data: 73, Time: "13:00:00", Type: 0 }, { Data: 73, Time: "13:15:00", Type: 0 }, { Data: 73, Time: "13:30:00", Type: 0 }, { Data: 73, Time: "13:45:00", Type: 0 }, { Data: 73, Time: "14:00:00", Type: 0 }, { Data: 73, Time: "14:15:00", Type: 0 } ] }; var _this = this; var MaxData15 = msg.MaxData; var WaterForcastTotalEfficiency15 = msg.WaterForcastTotalEfficiency; var WaterRealTotalEfficiency15 = msg.WaterRealTotalEfficiency; var time15 = []; var num15 = []; var markred15 = []; var markred15top = []; var MaxDatanum15 = []; //最大值 var WaterForcastTotalEfficiencynum15 = []; //預測曲線 var WaterRealTotalEfficiencynum15 = []; //實際曲線 for (var i = 0; i < WaterForcastTotalEfficiency15.length; i++) { WaterForcastTotalEfficiencynum15.push( WaterForcastTotalEfficiency15[i].Data ); time15.push(WaterForcastTotalEfficiency15[i].Time); MaxDatanum15.push(MaxData15); num15.push(MaxData15 / 30); } for (var i = 0; i < WaterRealTotalEfficiency15.length; i++) { WaterRealTotalEfficiencynum15.push(WaterRealTotalEfficiency15[i].Data); } for (var i = 0; i < WaterRealTotalEfficiency15.length - 1; i++) { markred15.push(0); markred15top.push(0); } markred15.push( WaterRealTotalEfficiencynum15[WaterRealTotalEfficiencynum15.length - 1] ); markred15top.push(MaxData15 / 30); _this.Datatime15 = time15; _this.DataWaterRealTotalEfficiencynum15 = WaterRealTotalEfficiencynum15; _this.DataWaterForcastTotalEfficiencynum15 = WaterForcastTotalEfficiencynum15; _this.Datamarkred15 = markred15; _this.Datamarkred15top = markred15top; _this.Datanum15 = num15; _this.DataMaxDatanum15 = MaxDatanum15; _this.drawLine(); }, drawLine() { // 基于準備好的dom，初始化echarts實例 let myChart = this.$echarts.init(document.getElementById("main5")); // 繪制圖表 myChart.setOption({ grid: { height: 84, width: 760, bottom: 10, top: 35, right: 1, left: 51 }, color: ["#a9b2bf", "#0060ff", "#b53f9a"], legend: { right: 5, width: 500, itemWidth: 40, textStyle: { color: "#6e7b8b" }, data: ["歷史值", "預測值"], icon: "rect", //? 這個字段控制形狀? 類型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 14, // 設置寬度
itemHeight: 14, // 設置高度
itemGap: 40 // 設置間距 }, tooltip: { trigger: "axis", padding: [0, 10], formatter: function(params) { /* console.log(params) */ var res = "<div> <p> 時間：" + params[0].name + " </p> </div>"; for (var i = 0; i < params.length; i++) { if (params[i].seriesName == "歷史值") { res += "<p>" + params[i].seriesName + ":" + params[i].data + "</p>"; } else if (params[i].seriesIndex == 3) { res += "<p>" + "預測值" + ":" + params[i].data + "</p>"; } /* res += "<p>" + params[i].seriesName + ":" + params[i].data + "</p>"; */ } return res; }, textStyle: { align: "left" } }, xAxis: [ { data: this.Datatime15, axisLabel: { inside: false, textStyle: { color: "#fff" } }, axisTick: { show: false }, axisLine: { show: false }, z: 10 } ], yAxis: { splitLine: { show: false, lineStyle: { color: "#dfdfdf", width: 1, type: "dashed" } }, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { textStyle: { color: "#999" } } }, series: [ { name: "歷史值", type: "bar", barWidth: 6, data: this.DataWaterRealTotalEfficiencynum15, zlevel: 99, itemStyle: { normal: { color: "#a9b2bf" } } }, { type: "bar", stack: "標記", barWidth: 6, data: this.Datamarkred15, zlevel: 199, itemStyle: { normal: { color: "red" } }, tooltip: { show: false } }, { type: "bar", stack: "標記", barWidth: 6, data: this.Datamarkred15top, zlevel: 199, itemStyle: { normal: { color: "red" } }, tooltip: { show: false } },
{ type: "bar", stack: "總量", barWidth: 6, itemStyle: { normal: { color: "rgba(229,235,236,0)" } }, zlevel: 1333, // Make series be overlap /* barGap: '-100%', */ data: this .DataWaterForcastTotalEfficiencynum15 }, { name: "預測值", type: "bar", barWidth: 6, stack: "總量", itemStyle: { normal: { color: "#0060ff" } }, zlevel: 1333, data: this.Datanum15 }, { type: "bar", barWidth: 6, itemStyle: { normal: { color: "#e5ebec" } }, barGap: "-100%", data: this.DataMaxDatanum15 } ] }); } }, beforeDestroy() { clearInterval(this.bjstimer5); this.bjstimer5 = null; } }; </script> <style scoped> #main5 { width: 820px; height: 134px; margin-left: 20px;
/* border: 1px red solid; */ } </style> 今天先到這，有時間在續寫......

?

轉載于:https://www.cnblogs.com/volodya/p/Echarts.html

總結

以上是生活随笔為你收集整理的Echarts富文本rich及格式化工具formatter的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： hdu5693 D gamehdu 57
下一篇：基于SpringBoot项目的https