How to customize the prompt box in echarts? Now my text is going to be put in this prompt box.

How to customize the prompt box in

echarts? Now my text is going to be put in this prompt box

clipboard.png
how can I put 1 into 2? This is how my curve is generated

    Echarts(item_id){
                console.log(this.defaultID);
                    item_id=item_id || this.defaultID;
                       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,a){   //p  a
                                            _this.obj.Actualvalue=a[0].value;
                                             if(p[0]>250){
                                                 return [p[0] - 100, p[1] - 10];
                                             }
                                             if(p[0]<250){
                                                 return [p[0] + 10, p[1] - 10];
                                             }
                                        }
                                    },
                                    color: ["-sharp02aac2"], //
                                    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);
                             if(item_id != null){ //
                                  axios.get(`/gaoantun/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){
                                        var FHOne = response.data.data[i].recordTime.slice(11, 16);//x
                                        var FHOne_val =response.data.data[i].value;
                                        log(FHOne_val == null)
                                        if(FHOne_val == null){//null
                                            FHOne_val=response.data.data[i].comment;
//                                            FHOne_val = "";
                                        }
                                        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();
                                        };
                                    
                             })
                             }
                                if (optionFH.series[0].data.length==0) {
                                   optionFH.yAxis.min="0";
                                   optionFH.yAxis.max="3";
                            }
                            
        },

Please help

Oct.02,2021

provides an idea


echarts tooltip has a formatter function. Portal


mainly uses formatter to implement custom

the following is an example I wrote. formatter can customize the returned content, as follows. Just spell out your dom structure, and you can print par to see the corresponding parameters

.
tooltip: {
        show:true,
        formatter: function(par){
            console.log(par)
            return par[0].axisValue + '<br /><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+par[0].color+'"></span>'+par[0].seriesName+' '+parseFloat(par[0].value*.1).toFixed(4)+'Gbps'
            +'<br /><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+par[1].color+'"></span>'+par[1].seriesName+' '+ (-par[1].value)+'Gbps'
        }
    },
Menu