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);
网公网安备