ECharts 是一个强大的数据可视化库，能够帮助我们轻松创建各种图表。本文将详细介绍如何在 Vue 项目中快速引入和使用 ECharts，并使用 Vue 的选项式 API 来实现一个简单的柱状图组件。
1. 安装 ECharts
首先，我们需要通过 npm 或 yarn 安装 ECharts：
npm install echarts --save//或者yarn add echarts2. 创建一个使用 ECharts 的组件
我们将创建一个简单的柱状图组件，命名为 BarChart.vue。
2.1 完整代码
<template><div ref="barChart" style="width: 100%; height: 250px"></div>
</template><script>
import * as echarts from "echarts";export default {name: "BarChart",
props: {chartData: {type: Object,required: true}},mounted() {if (this.chartData && Object.keys(this.chartData).length > 0) {this.createChart(this.chartData);} else {console.warn("chartData is empty or not provided.");}
},
watch: {chartData: {handler(newVal) {if (newVal && Object.keys(newVal).length > 0) {this.createChart(newVal);}},deep: true // 深度监听对象的变化}
},methods: {createChart(listByOutbounddata) {const chart = echarts.init(this.$refs.barChart);const option = {title: {text: "",},tooltip: {},legend: {data: ["出库(万)", "入库(万)"],top: 10,left: "center",textStyle: {color: "#ccc",},},// color: ["#009491"],grid: {left: "0%",right: "0%",bottom: "0%",top: "20%",containLabel: true,},xAxis: {axisLabel: {textStyle: {color: "#fff",fontSize: "12",},lineStyle: {color: "#000",},interval: 0,rotate: 40,},type: "category",data: listByOutbounddata.map((item) => item.date),axisTick: {alignWithLabel: true,},},yAxis: {axisLabel: {textStyle: {color: "#fff",fontSize: "12",},lineStyle: {color: "#999",},interval: 0,},splitLine: {show: true,lineStyle: {color: "#000",},},},series: [{name: "出库(万)",type: "bar",barWidth: "15px",label: {normal: {show: true,position: "top",color: "#fff",},},itemStyle: {color: "#5ece9c",barBorderRadius: 2,},zlevel: 2,data: listByOutbounddata.map((item) => item.todayOutboundQuantity),},{name: "入库(万)",type: "bar",barWidth: "15px",label: {normal: {show: true,position: "top",color: "#fff",},},itemStyle: {color: "#299de8",barBorderRadius: 2,},zlevel: 2,data: listByOutbounddata.map((item) => item.todayInboundQuantity),},],};chart.setOption(option);},},
};
</script>3. 引入组件并使用
在 App.vue 或者其他需要使用这个图表的组件中，引入并使用 BarChart 组件。
<template><div id="app"><BarChart :chartData="listByOutbounddata" /></div>
</template><script>
import BarChart from './components/BarChart.vue';export default {name: 'App',components: {BarChart,},data() {return {listByOutbounddata:[], //后台请求的值}}
};
</script><style>
</style>4. 运行项目
确保你已经在项目根目录下运行了 npm run serve 或者 yarn serve，然后在浏览器中打开项目，你应该能够看到一个简单的柱状图。
