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

??????? ECharts 提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日圖，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

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

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

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

????????????? 原先 echarts 中的文本標(biāo)簽，只能對整塊統(tǒng)一進(jìn)行樣式設(shè)置，并且僅僅支持顏色和字體的設(shè)置，從而導(dǎo)致不易于制作表達(dá)能力更強(qiáng)的文字描述信息。

????????????? echarts v3.7 以后，支持了富文本標(biāo)簽，能夠：

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

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

• 文本塊（Text Block）：文本標(biāo)簽塊整體。
• 文本片段（Text Fregment）：文本標(biāo)簽塊中的部分文本。

?

?

文本樣式相關(guān)的配置項(xiàng)

echarts 提供了豐富的文本標(biāo)簽配置項(xiàng)，包括：

• 字體基本樣式設(shè)置：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。
• 文本塊的位置和旋轉(zhuǎn)：position、distance、rotate。

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

例如：

label: { // 在文本中，可以對部分文本采用 rich 中定義樣式。 // 這里需要在文本中使用標(biāo)記符號： // `{styleName|text content text content}` 標(biāo)記樣式名。 // 注意，換行仍是使用 '\n'。 formatter: [ '{a|這段文本采用樣式a}', '{b|這段文本采用樣式b}這段用默認(rèn)樣式{x|這段用樣式x}' ].join('\n'), // 這里是文本塊的樣式設(shè)置： color: '#333', fontSize: 5, fontFamily: 'Arial', borderWidth: 3, backgroundColor: '#984455', padding: [3, 10, 10, 5], lineHeight: 20, // rich 里是文本片段的樣式設(shè)置： 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。

?

---

?

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

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

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

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

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

例如：

標(biāo)簽的位置

對于折線圖、柱狀圖、散點(diǎn)圖等，均可以使用 label 來設(shè)置標(biāo)簽。標(biāo)簽的相對于圖形元素的位置，一般使用 label.position、label.distance 來配置。

例如：

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

?

---

?

標(biāo)簽的旋轉(zhuǎn)

某些圖中，為了能有足夠長的空間來顯示標(biāo)簽，需要對標(biāo)簽進(jìn)行旋轉(zhuǎn)。例如：

這種場景下，可以結(jié)合 align 和 verticalAlign 來調(diào)整標(biāo)簽位置。

注意，邏輯是，先使用 align 和 verticalAlign 定位，再旋轉(zhuǎn)。

?

---

?

文本片段的排版和對齊

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

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

只有 '\n' 是換行符，能導(dǎo)致?lián)Q行。

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

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

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

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

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

關(guān)于文字在文本片段盒中的位置：

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

例如：

?

特殊效果：圖標(biāo)、分割線、標(biāo)題塊、簡單表格

看下面的例子：

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

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

分割線實(shí)際是用 border 實(shí)現(xiàn)的：

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

標(biāo)題塊是使用 backgroundColor 實(shí)現(xiàn)的：

// 標(biāo)題文字居左 formatter: '{titleBg|Left Title}', rich: { titleBg: { backgroundColor: '#000', height: 30, borderRadius: [5, 5, 0, 0], padding: [0, 10, 0, 10], width: '100%', color: '#eee' } } // 標(biāo)題文字居中。 // 這個(gè)實(shí)現(xiàn)有些 tricky，但是，能夠不引入更復(fù)雜的排版規(guī)則而實(shí)現(xiàn)這個(gè)效果。 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' } }

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

<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.common.js"></script> </head>
<bod> <!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom --> <div id="main" style="width: 900px;height:600px;"></div> <script type="text/javascript"> // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例 var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù) 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|供水統(tǒng)計(jì)}', left: 'center', textStyle: { fontSize: 20 }, subtextStyle: { rich: { a: { //開頭和結(jié)尾的文字樣式 color: 'gray', fontSize: 18 }, b: { /* backgroundColor: 'pink', */ //無法設(shè)置漸變色 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] }] }; // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。 myChart.setOption(option); </script> </body>
</html> 01（這個(gè)title是動態(tài)的） 效果圖： <!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.common.js"></script> </head>
<bod> <!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom --> <div id="main" style="width: 900px;height:600px;"></div> <script type="text/javascript"> // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例 var myChart = echarts.init(document.getElementById('main')); var timename = "時(shí)間" var time = "18:08:08" // 指定圖表的配置項(xiàng)和數(shù)據(jù) 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: { //開頭和結(jié)尾的文字樣式 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] }] }; // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。 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; //預(yù)測曲線 var WaterRealUnitConsumption14 = msg.WaterRealUnitConsumption; //實(shí)際曲線 var time14 = []; var num14 = []; var markred14 = []; var markred14top=[] var MaxDatanum14 = []; //最大值 var WaterForcastUnitConsumptionnum14 = []; //預(yù)測曲線 var WaterRealUnitConsumptionnum14 = []; //實(shí)際曲線 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() { // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例 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: ["歷史值", "預(yù)測值"], icon: "rect", //? 這個(gè)字段控制形狀? 類型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 14, // 設(shè)置寬度
itemHeight: 14, // 設(shè)置高度
itemGap: 40 // 設(shè)置間距 }, tooltip: { trigger: "axis", padding: [0, 10], formatter: function(params) { /* console.log(params) */ var res = "<div> <p> 時(shí)間：" + 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>" + "預(yù)測值" + ":" + 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: '標(biāo)記', barWidth: 6, data:this.Datamarkred14, zlevel: 199, itemStyle: { normal: { color: "red", }, }, tooltip:{ show:false } }, { type: "bar", stack: '標(biāo)記', 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: "預(yù)測值", 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 = []; //預(yù)測曲線 var WaterRealTotalEfficiencynum15 = []; //實(shí)際曲線 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() { // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例 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: ["歷史值", "預(yù)測值"], icon: "rect", //? 這個(gè)字段控制形狀? 類型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 14, // 設(shè)置寬度
itemHeight: 14, // 設(shè)置高度
itemGap: 40 // 設(shè)置間距 }, tooltip: { trigger: "axis", padding: [0, 10], formatter: function(params) { /* console.log(params) */ var res = "<div> <p> 時(shí)間：" + 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>" + "預(yù)測值" + ":" + 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: "標(biāo)記", barWidth: 6, data: this.Datamarkred15, zlevel: 199, itemStyle: { normal: { color: "red" } }, tooltip: { show: false } }, { type: "bar", stack: "標(biāo)記", 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: "預(yù)測值", 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> 今天先到這，有時(shí)間在續(xù)寫......


?

轉(zhuǎn)載于:https://www.cnblogs.com/volodya/p/Echarts.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。