### Uncaught TypeError: Cannot read property 'setOption' of undefined 在我的vue项目中使用了echarts，其他使用固定data的都能正常使用，但是当我使用官网提供的demo后，就会出现该提示“Uncaught TypeError: Cannot read property 'setOption' of undefined”，说该方法未定义，我使用的是该demo“http://echarts.baidu.com/examples/editor.html?c=line-aqi”
### Version & Environment [版本及环境] + ECharts version [ECharts 版本]:4.0 + Browser version [浏览器类型和版本]:chrome 68.0.3440.106（正式版本） （64 位） + OS Version [操作系统类型和版本]:windows10 + webstorm 项目基于vuex+vue-cli+webpack完成 ### Expected behaviour [期望结果] http://echarts.baidu.com/examples/editor.html?c=line-aqi 同该渲染结果 ### ECharts option [ECharts配置项] ```javascript option = { this.chartColumn = echarts.init(document.getElementById('chartColumn')); $.get('/static/json/aqi-beijing.json', function (data) { console.log(data.map(function (item) { return item[0] })) this.chartColumn.setOption({ title: { text: 'Beijing AQI' }, tooltip: { trigger: 'axis' }, xAxis: { data: data.map(function (item) { return item[0]; }) }, yAxis: { splitLine: { show: false } }, toolbox: { left: 'center', feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, dataZoom: [{ startValue: '2014-06-01' }, { type: 'inside' }], visualMap: { top: 10, right: 10, pieces: [{ gt: 0, lte: 50, color: '#096' }, { gt: 50, lte: 100, color: '#ffde33' }, { gt: 100, lte: 150, color: '#ff9933' }, { gt: 150, lte: 200, color: '#cc0033' }, { gt: 200, lte: 300, color: '#660099' }, { gt: 300, color: '#7e0023' }], outOfRange: { color: '#999' } }, series: { name: 'Beijing AQI', type: 'line', data: data.map(function (item) { return item[1]; }), markLine: { silent: true, data: [{ yAxis: 50 }, { yAxis: 100 }, { yAxis: 150 }, { yAxis: 200 }, { yAxis: 300 }] } } }); }); } ``` ### Other comments [其他信息] ``` <template> <section class="chart-container"> <el-row> <el-col :span="12"> <div id="chartColumn" style="width:100%; height:400px;"></div> </el-col> <el-col :span="24"> <a href="http://echarts.baidu.com/examples.html"; target="_blank" style="float: right;">more>></a> </el-col> </el-row> </section> </template> <script> import * as echarts from 'echarts'; import $ from 'jquery'; export default { data() { return { chartColumn: null } }, methods: { drawColumnChart() { this.chartColumn = echarts.init(document.getElementById('chartColumn')); // this.chartColumn.setOption({ $.get('/static/json/aqi-beijing.json', function (data) { console.log(data.map(function (item) { return item[0] })) this.chartColumn.setOption({ title: { text: 'Beijing AQI' }, tooltip: { trigger: 'axis' }, xAxis: { data: data.map(function (item) { return item[0]; }) }, yAxis: { splitLine: { show: false } }, toolbox: { left: 'center', feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, dataZoom: [{ startValue: '2014-06-01' }, { type: 'inside' }], visualMap: { top: 10, right: 10, pieces: [{ gt: 0, lte: 50, color: '#096' }, { gt: 50, lte: 100, color: '#ffde33' }, { gt: 100, lte: 150, color: '#ff9933' }, { gt: 150, lte: 200, color: '#cc0033' }, { gt: 200, lte: 300, color: '#660099' }, { gt: 300, color: '#7e0023' }], outOfRange: { color: '#999' } }, series: { name: 'Beijing AQI', type: 'line', data: data.map(function (item) { return item[1]; }), markLine: { silent: true, data: [{ yAxis: 50 }, { yAxis: 100 }, { yAxis: 150 }, { yAxis: 200 }, { yAxis: 300 }] } } }); }); // }); }, drawCharts() { this.drawColumnChart() }, }, mounted: function () { this.drawCharts() }, updated: function () { this.drawCharts() } } </script> <style scoped> .chart-container { width: 100%; float: left; } /*.chart div { height: 400px; float: left; }*/ .el-col { padding: 30px 20px; } </style> ``` [ Full content available at: https://github.com/apache/incubator-echarts/issues/8989 ] This message was relayed via gitbox.apache.org for [email protected]
