如何在vue项目中使用echarts

vue中使用echarts

1.第一步当然是使用npm下载echarts啦！

npm install echarts --save

2.第二步就是在main.js中全局引入echarts，当然也可以不进行全局引入

import echarts from "echarts";
Vue.prototype.$echarts = echarts;

3.第三步就是在你需要的页面使用echarts

<template>
   <div style="width: 100%; height: 300%" ref="chart"></div>
</template>
  <router-view/>

<script>
const Echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/bar')
export default {
  data () { return { chart: null } },
  mounted () { this.init() },
  methods: {
    init () {
      this.chart = Echarts.init(this.$refs.chart)
      const option = {
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
        yAxis: { type: 'value' },
        series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }]
      }
      this.chart.setOption(option)
    }
  }
}

</script>

<style scoped>

</style>

效果如下：

这个代码已经是根据eslint格式书写的，所以不会报错哦！如果报错了就是您有些地方搞错了，记住不用在当前使用的vue页面引入import哦！！！