javascript - 字面量方式封裝echarts組件,為什么初始化的時候失敗
問題描述
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script src='https://cdn.bootcss.com/echarts/3.5.3/echarts.min.js'></script> <style>#chart { width: 600px; height: 400px; border: 1px solid red; margin-bottom: 10px;} </style> <script>var ChartUtils = { cdata:[5, 20, 36, 10, 10, 20], options:{title: { text: ’ECharts 入門示例’},tooltip: {},legend: { data: [’銷量’]},xAxis: { data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},yAxis: {},series: [{ name: ’銷量’, type: ’bar’, data: this.cdata}] }, init: function (id) {var el = document.getElementById(id);this.chart = echarts.init(el);console.log(this.cdata);this.chart.setOption(this.options); }, update:function (data) {this.cdata = data;this.chart.setOption(this.options); }};function btn1() { ChartUtils.init('chart');}function btn2() { ChartUtils.update([1, 2, 3, 4, 5, 6]);} </script></head><body><p id='chart'></p><button onclick='btn1()'>初始化</button><button onclick='btn2()'>更新表</button></body></html>
求正確寫法,初始化和更新數據方法
問題解答
回答1：this.cdata = data;this.chart.setOption(this.options);這里是給this.cdata重新賦值了，并不是改變了當前引用位置的元素，所以不會同步共享this.options.series.data = data;this.chart.setOption(this.options);
網公網安備