问题描述：

控制台，出现如下报错：image.png

解决方案：

导入echarts时用：import echarts from ‘echarts’ 出现 “Cannot read property ‘init’ of undefined” 报错，改成 import * as echarts from ‘echarts’ 后解决。

避免出现上述问题解决方案：

https://cloud.tencent.com/developer/article/1060339

第一步：

  1. npm install echarts -S

第二步：

  1. // 引入echarts
  2. import echarts from 'echarts' Vue.prototype.$echarts = echarts

第三步：

  1. // 引入基本模板
  2. let echarts = require('echarts/lib/echarts')
  3. // 引入柱状图组件
  4. require('echarts/lib/chart/bar')
  5. // 引入提示框和title组件
  6. require('echarts/lib/component/tooltip')
  7. require('echarts/lib/component/title')
  8. export default {
  9. name: 'hello',
  10. data() {
  11. return {
  12. msg: 'Welcome to Your Vue.js App'
  13. }
  14. },
  15. mounted() {
  16. this.drawLine();
  17. },
  18. methods: {
  19. drawLine() {
  20. // 基于准备好的dom，初始化echarts实例
  21. let myChart = echarts.init(document.getElementById('myChart'))
  22. // 绘制图表
  23. myChart.setOption({
  24. title: { text: 'ECharts 入门示例' },
  25. tooltip: {},
  26. xAxis: {
  27. data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  28. },
  29. yAxis: {},
  30. series: [{
  31. name: '销量',
  32. type: 'bar',
  33. data: [5, 20, 36, 10, 10, 20]
  34. }]
  35. });
  36. }
  37. }
  38. }