Skip to content

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

@ljgx

Description

@ljgx

报错内容

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
    );
  },
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions