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

echarts 自定义折线图颜色及拐点 及 tooltip_第1张图片

折线图颜色及拐点颜色

// 折线图 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; 
      },
    },

你可能感兴趣的:(echarts)