echarts折线图点的形状和颜色自定义

<script>
import * as echarts from "echarts";
export default {
  name: "EChartsExample",
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.chart);
      // 原始数据
      var rawData = [820, 932, 901, 934, 1290, 1331, 1320];

      // 处理数据，为每个数据点设置形状
      // 折线图设置点的形状

      var processedData = rawData.map(function (value) {
        return {
          value: value,
          symbol: value % 2 === 0 ? "rect" : "circle", // 根据奇偶性设置形状
          symbolSize: 7, // 形状大小（可选）
          itemStyle: {
            color: value % 2 === 0 ? "red" : "blue",
          },
        };
      });

     

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: "一周数据变化",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: processedData,
            type: "line",

            smooth: true, // 如果需要平滑曲线，可以设置为true
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表
      this.chart.setOption(option);
    },
  },
};
</script>
<template>
  <div ref="chart" style="width: 600px; height: 400px; margin: 50px"></div>
</template>
<style  scoped>
</style>

效果