echarts折線圖的每個(gè)折點(diǎn)都顯示數(shù)值的實(shí)現(xiàn)方式
更新時(shí)間:2023年10月27日 14:32:48 作者:彭世瑜
這篇文章主要介紹了echarts折線圖的每個(gè)折點(diǎn)都顯示數(shù)值的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
echarts折線圖的每個(gè)折點(diǎn)都顯示數(shù)值
在 series中添加
itemStyle : { normal: {label : {show: true}}}
在django中使用echarts折線圖的完整代碼
<script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; result = eval({{ chart_data | safe }}); option = { title: { text: result.title, x: 'center', show : true }, tooltip: { formatter: '\n{c}' }, xAxis: { type: 'category', data: result.feature }, yAxis: { type: 'value' }, series: [{ data: result.data, type: 'line', // 顯示數(shù)值 itemStyle : { normal: {label : {show: true}}} }] }; if (option && typeof option === "object") { myChart.setOption(option, true); } </script>
echarts折線圖數(shù)值后添加單位
//溫度、濕度、風(fēng)速、風(fēng)向、氣壓、照度單位 let getUnitType = (type,value) => { type = Number(type); var unit = ''; switch (type) { case 209033: unit = '℃'; break; case 209034: unit = '%'; break; case 209035: unit = 'm/s'; break; case 209036: unit = getWindDirection(value); break; case 209037: unit = 'HPa'; break; case 200088: unit = 'Lux'; break; } return unit; };
法1:
tooltip: { trigger: 'axis', formatter: function (params) { var relVal = params[0].name for (var i = 0, l = params.length; i < l; i++) { relVal += '<br/>' + params[i].marker + params[i].value + getUnitType(pollutionTypeMap1New[pltKey],params[i].value) } return relVal } },
法2:
tooltip: { trigger: 'axis', formatter: function (obj) { let arr = obj.map((item, i) => { return ( item.marker + item.value + '(' + getUnitType(pollutionTypeMap1New[pltKey],item.value) + ')' + '<br>' ); }); return obj[0].name + '<br>' + arr.join(' '); }, },
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Python?使用pip在windows命令行中安裝HDF?reader包的操作方法
HDF reader包是一個(gè)常用來(lái)將.mat類型數(shù)據(jù)導(dǎo)入到python在這里插入代碼片中使用的包,非常好用,今天介紹一下,如何在命令行中安裝這個(gè)包,需要的朋友可以參考下2022-12-12Django集成celery發(fā)送異步郵件實(shí)例
今天小編就為大家分享一篇Django集成celery發(fā)送異步郵件實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-12-12分析python并發(fā)網(wǎng)絡(luò)通信模型
隨著互聯(lián)網(wǎng)和物聯(lián)網(wǎng)的高速發(fā)展,使用網(wǎng)絡(luò)的人數(shù)和電子設(shè)備的數(shù)量急劇增長(zhǎng),其也對(duì)互聯(lián)網(wǎng)后臺(tái)服務(wù)程序提出了更高的性能和并發(fā)要求。本文主要分析比較了一些模型的優(yōu)缺點(diǎn),并且用python來(lái)實(shí)現(xiàn)2021-06-0668行Python代碼實(shí)現(xiàn)帶難度升級(jí)的貪吃蛇
本文主要介紹了Python代碼實(shí)現(xiàn)帶難度升級(jí)的貪吃蛇,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01python paramiko利用sftp上傳目錄到遠(yuǎn)程的實(shí)例
今天小編就為大家分享一篇python paramiko利用sftp上傳目錄到遠(yuǎn)程的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-01-01python接口自動(dòng)化(十六)--參數(shù)關(guān)聯(lián)接口后傳(詳解)
這篇文章主要介紹了python接口自動(dòng)化參數(shù)關(guān)聯(lián)接口,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04