echarts折線圖的每個(gè)折點(diǎn)都顯示數(shù)值的實(shí)現(xiàn)方式
更新時(shí)間:2023年10月27日 14:32:48 作者:彭世瑜
這篇文章主要介紹了echarts折線圖的每個(gè)折點(diǎn)都顯示數(shù)值的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(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è)常用來將.mat類型數(shù)據(jù)導(dǎo)入到python在這里插入代碼片中使用的包,非常好用,今天介紹一下,如何在命令行中安裝這個(gè)包,需要的朋友可以參考下2022-12-12
Django集成celery發(fā)送異步郵件實(shí)例
今天小編就為大家分享一篇Django集成celery發(fā)送異步郵件實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-12-12
分析python并發(fā)網(wǎng)絡(luò)通信模型
隨著互聯(lián)網(wǎng)和物聯(lián)網(wǎng)的高速發(fā)展,使用網(wǎng)絡(luò)的人數(shù)和電子設(shè)備的數(shù)量急劇增長,其也對互聯(lián)網(wǎng)后臺服務(wù)程序提出了更高的性能和并發(fā)要求。本文主要分析比較了一些模型的優(yōu)缺點(diǎn),并且用python來實(shí)現(xiàn)2021-06-06
68行Python代碼實(shí)現(xiàn)帶難度升級的貪吃蛇
本文主要介紹了Python代碼實(shí)現(xiàn)帶難度升級的貪吃蛇,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01
python paramiko利用sftp上傳目錄到遠(yuǎn)程的實(shí)例
今天小編就為大家分享一篇python paramiko利用sftp上傳目錄到遠(yuǎn)程的實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-01-01
python接口自動(dòng)化(十六)--參數(shù)關(guān)聯(lián)接口后傳(詳解)
這篇文章主要介紹了python接口自動(dòng)化參數(shù)關(guān)聯(lián)接口,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04

