ECharts数据变化时如何刷新？

Question

我目前正在开发一个交互式图表，它应该能够计算商业项目的潜在风险因素。我一直在使用百度ECharts进行开发，可视化效果很好，但是当数据变化时无法更新图表。

数据来自外部问卷，使用单选按钮提供值，并使用复选框打开和关闭整个集合。

 <input type="checkbox" id="GPEbool" value="true"> Example Question 1</h4>
    <form action="">
  <input type="radio" id="polishedness" value="1"> Idea<br>
  <input type="radio" id="polishedness" value="1"> Concept<br>
  <input type="radio" id="polishedness" value="2"> Mockup<br>
  <input type="radio" id="polishedness" value="5"> Prototype<br>
  <input type="radio" id="polishedness" value="7"> Playable<br>
  <input type="radio" id="polishedness" value="15"> Polish<br>
  <input type="radio" id="polishedness" value="30"> Finished<br>
</form>

现在的问题是如何将数据传输到图表中。在初始添加“checked”属性时，可以正确获取选择的值，但之后无法更新。

data: [{ value: $('input[name=polishedness]:checked').val(), name: 'Design'}]

我尝试在每次更改时调用刷新函数，但它会返回“刷新不是函数”的错误。 我真的很困惑，中文文档对我没有什么帮助:)

有任何建议吗？ 预先感谢您！

- Sonioo

Answer 1

你需要再次调用 chartInstance.setOption() 并传入你的新数据。

以下是一个小例子：

// eChart is the chart instance!
echart.setOption({
   // .... some configuration
   series: [
       {
           type: "line",
           name: "test",
           data: [1,2,3,4,5,6]
       }
   ]
})

更改您的选择框的值后，您需要捕获该事件，更改配置对象的值并再次调用 chartInstance.setOption()。

因此，有时候最好将完整的配置对象保存下来，并在那里存储您所做的更改。

- Mijago

---

非常抱歉回复晚了，我不知道怎么就完全错过了 :( 但这是我的问题的解决方案！谢谢！ - Sonioo

你有这段代码的HTML部分吗？ - ScipioAfricanus

除了这个答案之外，如果你只改变了系列数据但是图表没有变化，setOption的第二个参数是'notMerge?: boolean'。对我来说，setOption(option, true)是解决方案。 - ahmetkilinc

Answer 2

如果你正在使用Angular，你也可以使用[merge]选项来使图表响应值的变化。

<div echarts [options]="initialValue" [merge]= "dynamicData" class="demo-chart"></div>

参考资料: https://github.com/xieziyu/ngx-echarts#api

在模块中按如下分配初始值：

  initialValue: EChartOption = {
xAxis: {
  type: 'time',
  splitNumber : 20
},
yAxis: {
  type: 'value',
  name : '$',
  nameLocation: 'middle'
},
series: [{
  data : [],
  type: 'line'
}]

根据您的数据设置动态值，并在调用外部服务的API之前初始化 "this.dynamicData"。

 formDataforChart(backTestTrades) {
    let i = 0;
    for(let backTestTrade of backTestTrades){
       let profitAndTime = [];
       profitAndTime.push(backTestTrade.exitTime);
       profitAndTime.push(backTestTrade.profitOrLoss);
       this.eChartDataSeries.push(profitAndTime);
    }
    let data = {
      data : this.eChartDataSeries,
      type : 'bar'
    };
    this.dynamicData=this.initialValue;
    this.dynamicData.series = [];
    // Applying my dynamic data here
    this.dynamicData.series.push(data);  
  }

- Peru

Answer 3

你可以使用resize()方法，例如：

window.chartRadar = echarts.init(document.getElementById('echartId'));
window.chartRadar.setOption({
        title: {
            text: 'radar echart'
        },
        tooltip: {},
        legend: {
            data: ['data1', 'data2']
        },
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
               }
            },
            indicator: [
               { name: 'sales', max: 6500},
               { name: 'Administration', max: 16000},
               { name: 'Information Techology', max: 30000},
               { name: 'Customer Support', max: 38000},
               { name: 'Development', max: 52000},
               { name: 'Marketing', max: 25000}
            ]
        },
        series: [{
            name: 'Budget vs spending',
            type: 'radar',
            // areaStyle: {normal: {}},
            data : [
                {
                    value : [4300, 10000, 28000, 35000, 50000, 19000],
                    name : 'data1'
                },
                 {
                    value : [5000, 14000, 28000, 31000, 42000, 21000],
                    name : 'data2'
                }
            ]
        }]
    });

一旦您已经创建了您的 Echart，您可以使用 "resize()" 方法重新绘制 Echart。例如：

window.chartRadar.resize();

- Ing Oscar MR