快捷導(dǎo)航

Vue使用Echarts的三種實(shí)現(xiàn)方式

更新時(shí)間：2026年04月23日 09:19:29 作者：偉笑

文章介紹了三種在Vue項(xiàng)目中使用ECharts的方法：直接使用原始方法、使用vue-echarts和v-chhart,詳細(xì)描述了每種方法的步驟和優(yōu)勢(shì),幫助開發(fā)者在Vue項(xiàng)目中更方便地地使用ECharts

一、原始方法直接使用

1、安裝ECharts：

npm install echarts --save

2、創(chuàng)建一個(gè)Vue公共組件 EChart.vue：

<template>
  <div :style="{width: '100%', height: '300px'}" ref="chart"></div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'EChart',
  props: {
    option: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chartInstance: null
    }
  },
  watch: {
    option: {
      handler(newOption) {
        if (this.chartInstance) {
          this.chartInstance.setOption(newOption);
        }
      },
      deep: true
    }
  },
  mounted() {
    this.chartInstance = echarts.init(this.$refs.chart);
    this.chartInstance.setOption(this.option);
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  }
}
</script>

3、使用EChart.vue組件

<template>
  <div>
    <e-chart :option="chartOption"></e-chart>
  </div>
</template>
 
<script>
import EChart from './EChart.vue'
 
export default {
  components: {
    EChart
  },
  data() {
    return {
      chartOption: {
        // ECharts 配置項(xiàng)
      }
    }
  }
}
</script>

這個(gè)例子中，EChart.vue組件通過props接收ECharts的配置項(xiàng)option，并在組件的mounted生命周期鉤子中初始化ECharts實(shí)例，在watch中監(jiān)控option的變化，并更新圖表。

在父組件中，你可以通過傳遞不同的chartOption來(lái)更新圖表。

這樣做的好處是，你可以在多個(gè)地方復(fù)用這個(gè)圖表組件，并通過傳遞不同的配置來(lái)定制圖表的顯示。同時(shí)，組件內(nèi)部處理了ECharts實(shí)例的創(chuàng)建和銷毀，使得使用更加簡(jiǎn)潔和高效。

二、使用vue-echarts

vue-echarts （https://github.com/ecomfe/vue-echarts）是ECharts 的 Vue.js 組件，基于 ECharts v4.1.0+ 開發(fā)，依賴 Vue.js v2.2.6+，意思就是可以直接把echarts實(shí)例當(dāng)中vue中的組件來(lái)使用，不用每次都獲取dom、掛在dom，輕松使用echarts的所用功能。

npm install echarts vue-echart

main.js中引入

import ECharts from 'vue-echarts'
// 注冊(cè)全局的組件
Vue.component('vChart', ECharts)

vue中使用，直接添加options 數(shù)據(jù)即可。

<template>
  <div class="page">
    <el-card>
      <!-- 柱狀圖+折線圖 -->
      <vChart class="chart3" :options="barOptions" />
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      barOptions: {
        color: ["#5094FF", "#64DAAC", "#FAC84A"],
        grid: {
          top: "15%",
          bottom: "20%",
          right: "5%",
          left: "5%"
        },
        tooltip: {},
        legend: {
          data: ["合格數(shù)", "超標(biāo)數(shù)", "合格率", "超標(biāo)率"],
          top: "0"
        },
        xAxis: {
          type: "category",
          data: ["04-13", "04-14", "04-15", "04-16", "04-17", "04-18", "04-19"]
        },
        yAxis: {
          // name: '合格率(%)',
          // nameLocation: 'middle',
          type: "value"
          // nameTextStyle: {
          //   fontSize: '0.072917rem',
          //   color: '#999999'
          // }
        },
        series: [
          {
            name: "合格數(shù)",
            type: "bar",
            barWidth: "15%",
            barGap: "5%",
            data: [20, 232, 441, 654, 770, 530, 410]
          },
          {
            name: "超標(biāo)數(shù)",
            type: "bar",
            barWidth: "15%",
            data: [120, 482, 791, 834, 590, 930, 710]
          },
          {
            name: "合格率",
            type: "line",
            data: [420, 332, 291, 654, 590, 330, 810]
          },
          {
            name: "超標(biāo)率",
            type: "line",
            data: [120, 232, 391, 854, 590, 730, 410]
          }
        ]
      }
    };
  }
};
</script>

三、使用v-charts

v-charts（https://v-charts.js.org/#/）是基于vue2二次封裝的圖表組件庫(kù)，功能沒有echarts多但也夠用了，官網(wǎng)很詳細(xì)，這里用一個(gè)官網(wǎng)例子說明問題

<template>
  <ve-histogram :data="chartData" :settings="chartSettings"></ve-histogram>
</template>

<script>
  export default {
    data () {
      this.chartSettings = {
        showLine: ['下單用戶']
      }
      return {
        chartData: {
          columns: ['日期', '訪問用戶', '下單用戶', '下單率'],
          rows: [
            { '日期': '1/1', '訪問用戶': 1393, '下單用戶': 1093, '下單率': 0.32 },
            { '日期': '1/2', '訪問用戶': 3530, '下單用戶': 3230, '下單率': 0.26 },
            { '日期': '1/3', '訪問用戶': 2923, '下單用戶': 2623, '下單率': 0.76 },
            { '日期': '1/4', '訪問用戶': 1723, '下單用戶': 1423, '下單率': 0.49 },
            { '日期': '1/5', '訪問用戶': 3792, '下單用戶': 3492, '下單率': 0.323 },
            { '日期': '1/6', '訪問用戶': 4593, '下單用戶': 4293, '下單率': 0.78 }
          ]
        }
      }
    }
  }
</script>