hustcc / echarts-for-react

⛳️ Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。
https://git.hust.cc/echarts-for-react
MIT License
4.56k stars 633 forks source link

setOption()无效 #306

Closed acdzh closed 5 years ago

acdzh commented 5 years ago

我有一个函数, 它取出当前的Option, 之后再set回去(notMerge: true), 再次getOption(), 得到的结果和预期不一致. 一执行这个函数, 线和点的粗细就变化了.

这是代码:

test = () => {
    const echartInstanse = this.echarts_react.getEchartsInstance();
    const op = echartInstanse.getOption();
    console.log(op.series);
    echartInstanse.setOption(op, true);
    console.log(echartInstanse.getOption().series);
}

这是问题的截图: a

这是打印出的两次的option.series, 除了标出来的lineStyle发生了变化之外, itemStyle实际上也发生了变化.

批注 2019-08-21 233845

版本信息:

    "echarts": "^4.2.1",
    "echarts-for-react": "^2.0.15-beta.0",

另外, 如果是直接在html中引用echarts的话, 无此问题.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
  </head>

  <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <button id='test'>test</button>
  </body>
  <script>
    option = {
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
      ],
      yAxis: [{ type: 'value' }],
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320, 820, 932,],
          type: 'line',
          name: '1',
        },
        {
          data: [720, 832, 1001, 834, 1190, 1130, 1420, 720, 632, 1001, 834, 1390, 1230, 1520, 901, 834, 1190, 1230, 1120, 920, 632,],
          type: 'line',
          xAxisIndex: 1
        }
      ]
    };
    var mychart = echarts.init(document.getElementById('main'));
    mychart.setOption(option);

    document.getElementById('test').onclick = function test() {
      op = mychart.getOption();
      console.log(op.series);
      mychart.setOption(op);
      console.log(mychart.getOption().series);
  }
  </script>
</html>

打印出的结果:

微信图片_20190822111433

基本上问题在echarts-for-react这个库了.

  1. 请问怎么解决这个问题
  2. 在echarts4.x中, 官方不是不再在lineStyle和itemStyle中使用normal和emphasis配置项了吗, 为什么会出现这一项呢? api - lineStyle (4.x), api - lineStyle (3.x)

感谢

acdzh commented 5 years ago

原因找到了, 是我主题配置的问题