【echarts】markPoint 按条件进行显示

 

需求：根据条件，在柱状图上进行标记

我们选用markPoint来实现，主要思路就是自定义markPoint里面的数据，根据条件去塞选并赋值。

相关代码👇

  this.TaScoreList.map((item, index) => {
        this.MyScoreList.map((ll, index1) => {
          if (item >= 6.5 && item - ll >= 1 && index === index1) {
            this.markData.push({
              value: "",
              xAxis: index,
              yAxis: 5.1, // 控制标志在出现的位置
              symbol:
                "",
              symbolSize: 20,
              itemStyle: {
                //设置标记点的样式
                normal: { color: "green" },
              },
            });
          }
          if (item <= 7.5 && item - ll <= 1 && index === index1) {
            this.markData.push({
              value: "",
              xAxis: index,
              yAxis: 5.1,
              symbol:
                "",
              symbolSize: 20,
              itemStyle: {
                //设置标记点的样式
                normal: { color: "red" },
              },
            });
          }
        });
      });

然后在series里面加上

  markPoint: {
       data: this.markData,
 },