在Vue中使用echarts

超简单步骤已完成

image.png

• 1. 安装 npm install echarts -S
• 2.mian.js引入
  import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
• 3.ehcats文件
  3.1 写入结构

<div id="myChart" ref="chart"></div>

• 3.2js

data里加 `charts: '',`
    mounted() {
      this.echartsl()
    },
    methods: {
      echartsl() {
        this.charts = this.$echarts.init(this.$refs.chart);
        // 基于准备好的dom，初始化echarts实例
        this.charts.setOption({
          title: { text: '在Vue中使用echarts' },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        });
      }
    }

以上代码复制即可使用

最后总结问题
一开始我写完报错
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null"
问题解决
是从一开始的引入我就写错了，是要安装官方文档上引入
import echarts from 'echarts' 改成import * as echarts from 'echarts'
在echarts 文件中
let myChart = this.$echarts.init(document.getElementById('myChart'))
修改成
this.charts = this.$echarts.init(this.$refs.chart);
就可以了
完成
你是最棒的，哈哈