在Vue中添加ECharts图表有几种常见的方法，下面我将介绍其中两种常用的方法：
方法一：使用vue-echarts插件
- 首先，安装
vue-echarts插件：
npm install vue-echarts echarts
- 在
main.js中引入ECharts和vue-echarts：
import Vue from 'vue' import ECharts from 'echarts' import VueECharts from 'vue-echarts' Vue.component('v-chart', VueECharts) Vue.prototype.$echarts = ECharts
- 在组件中使用ECharts图表：
<template> <div> <v-chart :options="chartOptions" style="height: 400px;"></v-chart> </div> </template> <script> export default { data() { return { chartOptions: { // ECharts配置项 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>
方法二：直接在Vue组件中引入ECharts库
- 安装ECharts库：
npm install echarts
- 在组件中引入ECharts库并使用：
<template> <div ref="chart" style="height: 400px;"></div> </template> <script> import * as echarts from 'echarts' export default { mounted() { this.initChart() }, methods: { initChart() { const chart = echarts.init(this.$refs.chart) chart.setOption({ // ECharts配置项 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>
