Echarts的setOptions方法不能单独修改series[].type

需求

将折线图转成柱状图

代码

var myChart = echarts.init(document.getElementById('main'));
 
var option = {
  title: {text: 'ECharts 入门示例'},
  tooltip: {},
  legend: {data: ['销量']},
  xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'line',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

setTimeout(() => {
  myChart.setOption({
    series: [{
      type: 'bar'
    }]
  })
}, 1000);

效果

Echarts的setOptions方法不能单独修改series[].type_第1张图片
定时器执行,一秒之后
Echarts的setOptions方法不能单独修改series[].type_第2张图片

原因

源码搜索中…

解决方案

  1. 使用setOption修改type的同时,加上data数据。
  2. 手动修改option对象中的type,然后用refresh刷新。

你可能感兴趣的:(echarts,前端,javascript)