echarts在vue中的使用

在Vue中使用Echarts需要先安装echarts和vue-echarts依赖。

1. 安装依赖

npm install echarts vue-echarts

2. 引入echarts

在main.js中引入echarts和vue-echarts

import echarts from 'echarts'
import ECharts from 'vue-echarts/components/ECharts.vue'

// 注册组件
Vue.component('v-chart', ECharts)

// 将echarts挂载到Vue原型上
Vue.prototype.$echarts = echarts

3. 使用

在组件中使用v-chart组件显示图表

<template>
  <v-chart :options="options"></v-chart>
</template>

<script>
export default {
  data() {
    return {
      options: {
        // echarts配置项
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [{
          name: 'Sales',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 5]
        }]
      }
    }
  }
}
</script>

以上就是在Vue中使用Echarts的基本方法，具体的Echarts配置可以参考Echarts官方文档。