echarts折線圖的每個折點都顯示數(shù)值的實現(xiàn)方式
更新時間：2023年10月27日 14:32:48 作者：彭世瑜
這篇文章主要介紹了echarts折線圖的每個折點都顯示數(shù)值的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
echarts折線圖的每個折點都顯示數(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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
大家好，本篇文章主要講的是Python中經(jīng)常使用的代碼片段，感興趣的同學(xué)趕快來看一看吧，對你有幫助的話記得收藏一下2022-01-01
ORB（Oriented FAST and Rotated BRIEF）算法是一種高效的特征檢測和描述符,它在圖像匹配中有廣泛的應(yīng)用,下面我們就來了解一下ORB算法的原理與實現(xiàn)吧2023-12-12
Python 實現(xiàn)文件讀寫、坐標(biāo)尋址、查找替換功能
這篇文章主要介紹了Python 實現(xiàn)文件讀寫、坐標(biāo)尋址、查找替換功能，本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-09-09
Flask應(yīng)用中執(zhí)行指定JavaScript腳本的6種方法
在 Flask 應(yīng)用中執(zhí)行指定 JavaScript 腳本,需結(jié)合后端路由,模板渲染及前后端交互技術(shù),本文主要介紹了六種核心方法及其實現(xiàn)細(xì)節(jié),大家可以根據(jù)需要進行選擇2025-06-06
python中parser.add_argument()用法實例(命令行選項、參數(shù)和子命令解析器)
最近開始讀論文代碼了,遇到一個名字叫option的py文件,打開一看清一色的parser.add_argument(),看得是一臉懵逼,這篇文章主要給大家介紹了關(guān)于python中parser.add_argument()用法的相關(guān)資料,需要的朋友可以參考下2022-03-03
Django零基礎(chǔ)入門之自定義標(biāo)簽及模板中的使用
這篇文章主要介紹了Django零基礎(chǔ)入門之自定義標(biāo)簽及模板中的使用，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-09-09
本文給大家簡單介紹了下如何使用Python實現(xiàn)獲取IP歸屬地信息的方法和代碼，非常的實用，有需要的小伙伴可以參考下2016-08-08
用Python編寫簡單的gRPC服務(wù)的詳細(xì)過程
gRPC 是可以在任何環(huán)境中運行的現(xiàn)代開源高性能 RPC 框架。接下來通過本文給大家介紹用Python編寫簡單的gRPC服務(wù)的詳細(xì)過程，感興趣的朋友一起看看吧2021-07-07
Numpy中的shape、reshape函數(shù)的區(qū)別
本文主要介紹了Numpy中的shape、reshape函數(shù)的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Python實戰(zhàn)之ATM取款機的實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了如何利用Python語言模擬實現(xiàn)ATM取款機功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-09-09