echarts折线图的每个折点都显示数值的实现方式
作者：彭世瑜
这篇文章主要介绍了echarts折线图的每个折点都显示数值的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
echarts折线图的每个折点都显示数值
在 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: '{b}\n{c}'
},
xAxis: {
type: 'category',
data: result.feature
},
yAxis: {
type: 'value'
},
series: [{
data: result.data,
type: 'line',
// 显示数值
itemStyle : { normal: {label : {show: true}}}
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>echarts折线图数值后添加单位
//温度、湿度、风速、风向、气压、照度单位
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(' ');
},
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。