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

最新推荐文章于 2025-05-19 13:50:38 发布

原创最新推荐文章于 2025-05-19 13:50:38 发布 · 5.3k 阅读

1 ·

CC 4.0 BY-SA版权

echarts 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何在折线图中设置不同颜色，并自定义拐点的颜色和宽度。同时，它展示了如何利用ECharts的tooltip功能，实现自定义的数据显示，包括将秒转换为分钟的格式化处理。通过这种方式，可以提升图表的可读性和视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

折线图颜色及拐点颜色

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