ec-canvas 使用onInit 方法初始化成功之后, setOption 设置notMerge为true报错

Author: ljgxCreated Jul 18, 2025Updated Jul 18, 2025

报错内容

Image

wxml

<button bind:tap="setChartData">改变图表参数</button>
<view class="chart-fa-view">
  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

wxss

.chart-fa-view {
  width: 100%;
  height: 566rpx;
}
#mychart-dom-line {
  width: 100%;
  height: 566rpx;
}

js

import * as echarts from "../../ec-canvas/echarts";

const app = getApp();
let customChart = null;
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr, // new
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: "测试下面legend的红色区域不应被裁剪",
      left: "center",
    },
    legend: {
      data: ["A", "B", "C"],
      top: 50,
      left: "center",
      backgroundColor: "red",
      z: 100,
    },
    grid: {
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#86909C",
      },
      // show: false
    },
    yAxis: {
      x: "center",
      name: "",
      type: "value",
      splitLine: {
        lineStyle: {
          color: "#ccc",
          type: "dashed",
        },
      },
      // show: false
    },
    dataset: {
      source: [
        ["时间", "A", "B"],
        ["周一", 43.3, 85.8],
        ["周二", 83.1, 73.4],
        ["周三", 86.4, 65.2],
        ["周四", 72.4, 53.9],
      ],
    },
    series: [
      {
        name: "A",
        type: "line",
        smooth: true,
      },
      {
        name: "B",
        type: "line",
        smooth: true,
      },
    ],
  };
  chart.setOption(option);
  customChart = chart;
  return chart;
}
function getSeries(val) {
  if (val % 2 === 0) {
    return [
      {
        name: "A",
        type: "line",
        smooth: true,
      },
      {
        name: "B",
        type: "line",
        smooth: true,
      },
    ];
  }
  return [
    {
      name: "C",
      type: "line",
      smooth: true,
    },
  ];
}
function getData(val) {
  if (val % 2 === 0) {
    return [
      ["时间", "A", "B"],
      ["周一", 43.3, 85.8],
      ["周二", 83.1, 73.4],
      ["周三", 86.4, 65.2],
      ["周四", 72.4, 53.9],
    ];
  }
  return [
    ["时间", "C"],
    ["周一", 90],
    ["周二", 78],
    ["周三", 51],
    ["周四", 12],
  ];
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: "ECharts 可以在微信小程序中使用啦!",
      path: "/pages/index/index",
      success: function () {},
      fail: function () {},
    };
  },
  data: {
    ec: {
      onInit: initChart,
    },
    a: 0,
  },

  onReady() {},
  setChartData() {
    this.data.a++;
    customChart.setOption(
      {
        series: getSeries(this.data.a),
        dataset: {
          source: getData(this.data.a),
        },
      },
      true
    );
  },
});

Source: ecomfe/echarts-for-weixin