echarts 散点图实现正负值颜色不同，方向不同

最新推荐文章于 2026-02-28 10:21:03 发布

原创最新推荐文章于 2026-02-28 10:21:03 发布 · 1k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #散点图 #正负值 #旋转 #颜色不同

收录于

本文介绍了一种使用自定义符号和颜色的散点图绘制方法，通过JavaScript代码实现了根据不同数值显示旋转三角形及圆形标记的功能，并对不同系列的数据采用不同的颜色进行区分。

效果如图：

核心代码：

const { RtimeList, RList, sList, $utils } = this;
series: [
          {
            type: "scatter",
            data: RList.map((item) => {
              return {
                value: item,
                symbol: "triangle",
                symbolRotate: item < 0 ? 0 : 180,
                itemStyle: {
                  normal: {
                    color: item < 0 ? "#E93030" : "#229D45",
                  },
                },
              };
            }),

            symbolSize: 10,
            labelLine: {
              show: false,
            },
          },
          {
            type: "scatter",
            data: sList.map((item) => {
              return {
                value: item,
              };
            }),
            itemStyle: {
              normal: {
                color: "#F2A01C",
              },
            },
          },
        ],