echarts 自定义折线图颜色及拐点 及 tooltip

786 阅读1分钟

image.png

折线图颜色及拐点颜色

// 折线图 option 中 加入
color: ["red", "blue", "orange"], 

// 拐点颜色 series 数组中每项
itemStyle:{//折线拐点标志的样式
    borderColor:"#E9CD4B",//拐点的边框颜色
    borderWidth:3.5
},

自定义 tooltip

tooltip: {
  trigger: "axis",
  formatter: function (s) {
    // s 为当前该点的值 数据单位秒 显示为分 ==>如不需要可忽略转换计算过程 
    //计算分钟
    //算法:将秒数除以60,然后下舍入,既得到分钟数
    // console.log(s)
    let s1 = s[0].data;
    let h1;
    h1 = Math.floor(s1 / 60);
    //计算秒
    //算法:取得秒%60的余数,既得到秒数
    s1 = s1 % 60;
    //将变量转换为字符串
    h1 += "";
    s1 += "";
    //如果只有一位数,前面增加一个0
    h1 = h1.length == 1 ? "0" + h1 : h1;
    s1 = s1.length == 1 ? "0" + s1 : s1;
    let s2 = s[1].data;
    let h2;
    h2 = Math.floor(s2 / 60);
    //计算秒
    //算法:取得秒%60的余数,既得到秒数
    s2 = s2 % 60;
    //将变量转换为字符串
    h2 += "";
    s2 += "";
    //如果只有一位数,前面增加一个0
    h2 = h2.length == 1 ? "0" + h2 : h2;
    s2 = s2.length == 1 ? "0" + s2 : s2;
    let s3 = s[2].data;
    let h3;
    h3 = Math.floor(s3 / 60);
    //计算秒
    //算法:取得秒%60的余数,既得到秒数
    s3 = s3 % 60;
    //将变量转换为字符串
    h3 += "";
    s3 += "";
    //如果只有一位数,前面增加一个0
    h3 = h3.length == 1 ? "0" + h3 : h3;
    s3 = s3.length == 1 ? "0" + s3 : s3;
    let ss = [s1, s2, s3]
    let hh = [h1, h2, h3]
    let str = '';
    str += s[0]['name']; // 当前该点名称
    for (let i in s) {
      str += '\n';
      str += '{marker' + i + 'at0|} ';
      str += s[i]['seriesName'];
      str += ':'
      str += hh[i] + ':' + ss[i]
    }
    return str; 
  },
},