carolcoral opened a new issue #8989: Uncaught TypeError: Cannot read property 'setOption' of undefined URL: https://github.com/apache/incubator-echarts/issues/8989 ### 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> ```
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
