when you click on the chart, you can only get the values in the title that come out. Because I need to assign this value to the actual value
the method I use to generate the curve
echartsClick(item_id){
console.log(item_id);
const _this=this;
const log=console.log;
let myChart =this.$echarts.init(document.getElementById("main"));
var optionFH = {
axisLine: {
show: false
},
//
splitLine: {
show: true
},
// y
axisTick: {
show: false
},
title: {
left: 10,
show: true,
text: "",
textStyle: {
color: "white",
fontSize: 16,
fontFamily: "",
}
},
tooltip: {
trigger: "axis",
position:function(p){ //p
if(p[0]>250){
return [p[0] - 100, p[1] - 10];
}
if(p[0]<250){
return [p[0] + 10, p[1] - 10];
}
}
},
color: ["-sharp02aac2","-sharpf19f00","-sharp5BD600","-sharpAC6FFF","-sharpC4EA79","-sharpE9F3B5"], //
legend: {
orient: "horizontal",
right: 25,
top: 0,
data: [""],
itemWidth: 22, //
itemHeight: 15,
background: "-sharp149f79",
textStyle:{
color:"white",//
fontSize:13,//
}
},
calculable: true,
xAxis: {
type: "category",
boundaryGap: false,
splitLine: { //x
show: true,
lineStyle: {
color: "-sharp35363B",
width: 1
}
},
axisLabel: {
show: true,
interval: "auto",
textStyle: {
// color: "-sharp35363B"
color: "white"//
}
//interval: Int //
},
axisLine:{
show: true,
lineStyle: {
// color: "red"//x
color: "white"//x
}
},
axisTick: {
show: false //
},
data: [0]
//data: arrOne_FH
},
grid: { //
x: 50,
top:20,//-----------------------------------------------------------------------------------
// width:300,//
// x2: 100,
// y2: 80,// y2 XZoom labelzoom
},
yAxis: {
type: "value",
splitLine: { //x
show: true,
lineStyle: {
color: "-sharp35363B",//
width: 1
}
},
// name: "(/)",
nameTextStyle: {
fontSize: 15,
color: "-sharpa9a9a9"
},
axisLabel: {
show: true,
interval: "auto",
inside: false,
// rotate: 90,
// margin: 8,
formatter: null,
showMinLabel: null,
showMaxLabel: null,
},
nameLocation: "end", //
// nameRotate:90,
axisLabel: { //
show: true,
textStyle: {
// color: "-sharp35363B"
color: "white"//
}
},
axisLine: { //y
show: true,
lineStyle: {
// color: "red"//y
color: "white"//y
}
},
axisTick: {
show: false //
},
// max: function(value) {
// if(value.max<30){
// return Math.floor(value.max) + 5;
// }else if(value.max>=30&&value.max<=100){
// return Math.floor(value.max) + 10;
// }else if(value.max>100&&value.max<2000){
// return Math.floor(value.max) + 50;
// }else if(value.max>=2000){
// return Math.floor(value.max) + 100;
// }
// }
},
series: [
{
name: "",//1
type: "line",
symbol: "none", //
yAxisIndex: 0,
data:0,
itemStyle: {
normal: { //
color: function(params) {
var colorList = ["yellow"];
return colorList[params.dataIndex];
}
},
},
itemStyle: { //
normal: {
lineStyle: {
color: "-sharp02aac2"
}
},
},
}
]
};
myChart.setOption(optionFH);
axios.get(`/xunjian/api/task/getItemHistoryDataListByItemId/${item_id}`).then((response)=>{
log(response.data.data);
console.log(response.data.data);
var arrOne_FH = [];
var arrOne_FH_val = [];
let Onezhi;
for(var i in response.data.data){
// console.log(response.data.data[i].value);
var FHOne = response.data.data[i].recordTime.slice(11, 16);//x
var FHOne_val =response.data.data[i].value;
arrOne_FH.push(FHOne);
arrOne_FH_val.push(FHOne_val);
}
var resv = arrOne_FH.reverse();
arrOne_FH_val.reverse();
// optionFH.legend.data = [Onezhi]; //
optionFH.xAxis.data = resv;
// optionFH.series[0].name =Onezhi;
optionFH.series[0].data = arrOne_FH_val;
myChart.setOption(optionFH,true);
window.onresize = function () {
//
myChart.resize();
};
})
}online, etc. If you get the value in the small box of title