#前端#项目#vue使用echarts

npm install echarts vue-echarts
main.js 加入如下的配置

import Echarts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'  //引入柱状图
import 'echarts/lib/chart/pie'  //引入饼图
Vue.component('chart',Echarts)

<template>
  <div class="hello">
     <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        orgOptions: {},
      }
    },
    mounted() {
      this.orgOptions = {
        color:['greenyellow'],
        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'
        }]
      }
    }
  }
</script>

具体去官网看文档