.net 在echarts折线图 怎么在图表中某个位置加入文字 像图中效果这样,求指教 谢谢
问题描述:
答
类似这样,在toolTip里面写就可以了
//初始化EChatrs
var tempChart = echarts.init(document.getElementById('temp'));
//定义ECharts的Value
var tempXData = [];
var supplyTempYData = [];
var returnTempYData = [];
//显示温度曲线
function setTempData(data) {
tempXData.splice(0, tempXData.length);
supplyTempYData.splice(0, supplyTempYData.length);
returnTempYData.splice(0, returnTempYData.length);
for (var i = 0; i < data.length; i++) {
tempXData.push(data[i].SavedDatetime.substr(0, 10));
supplyTempYData.push(data[i].SupplyWaterTemp);
returnTempYData.push(data[i].ReturnWaterTemp);
}
tempChart.setOption(TempDataoption);
}
var TempDataoption = {
tooltip: {
trigger: 'axis',
formatter:function(params) {
var result = params[0].name + '<br />';
params.forEach(function (item) {
result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span> ' + item.seriesName + ' : ' + item.data + '℃<br />';
});
return result;
}
},
legend: {
data: ['供水温度', '回水温度']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: true },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: tempXData
},
yAxis: {
type: 'value',
boundaryGap: false,
axisLabel: {
formatter: '{value} °C'
}
},
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0]
},
{
type: 'inside',
xAxisIndex: [0]
}
],
series: [
{
name: '供水温度',
type: 'line',
data: supplyTempYData
},
{
name: '回水温度',
type: 'line',
data: returnTempYData
},
]
};
答
toolTip里面写