Echarts 动态更新数据和样式

实现数据按月统计和按日统计的动态切换。按月统计时，每个月数据都会展示，x 轴显示 12 个标签；按日统计时，x 轴不完全显示所有标签，间隔显示，而且柱状体的宽度也会变化。主要是采用的是setOption方法。

官方文档[setOption]：https://echarts.apache.org/zh/api.html#echartsInstance.setOption

<script>
  import * as R from "ramda";

  const source1 = [
    ["1月", 1330, 666, 560],
    ["2月", 820, 760, 660],
    ......
    ["11月", 901, 880, 360],
    ["12月", 934, 600, 700],
  ];
  const source2 = [
    ["1日", 1330, 666, 560],
    ["2日", 820, 760, 660],
    ......
    ["29日", 934, 600, 700],
    ["30日", 1330, 666, 560],
  ];

  // 具体配置如之前所示，详细省略，只做基本示例展示
  const initOption = {
    ...
    dataset: { source: source1 },
  };

  export default {
    data() {
      return {
        charts: null,
        isDaily: false,
      };
    },
    mounted() {
      this.charts = this.$echarts.init(
        document.getElementById("barCharts"),
        null,
        {
          renderer: "svg",
        }
      );
      this.charts.setOption(R.clone(initOption));
    },
    methods: {
      handleSource() {
        this.isDaily = !this.isDaily;
        this.charts.setOption(
          R.mergeDeepRight(initOption, {
            dataset: {
              source: this.isDaily ? source2 : source1,
            },
            xAxis: {
              axisLabel: {
                interval: this.isDaily ? 4 : "auto",
              },
            },
            series: R.map(
              (o) => ((o.barWidth = this.isDaily ? 12 : 24), o),
              initOption.series
            ),
          }),
          true
        );
        this.charts.resize();
      },
    },
  };
</script>

标签：const,initOption,样式,666,setOption,charts,isDaily,动态,Echarts
来源： https://blog.csdn.net/gaoxiaoba/article/details/119886967