当前位置：首页 > news >正文

Vue中优雅的使用Echarts的三种方式

news 2025/6/26 14:24:07

一、原始方法直接使用

1、安装ECharts：

npm install echarts --save

2、创建一个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 配置项}}}
}
</script>

这个例子中，EChart.vue组件通过props接收ECharts的配置项option，并在组件的mounted生命周期钩子中初始化ECharts实例，在watch中监控option的变化，并更新图表。在父组件中，你可以通过传递不同的chartOption来更新图表。

这样做的好处是，你可以在多个地方复用这个图表组件，并通过传递不同的配置来定制图表的显示。同时，组件内部处理了ECharts实例的创建和销毁，使得使用更加简洁和高效。

二、使用vue-echarts

vue-echarts （https://github.com/ecomfe/vue-echarts）是ECharts 的 Vue.js 组件，基于 ECharts v4.1.0+ 开发，依赖 Vue.js v2.2.6+，意思就是可以直接把echarts实例当中vue中的组件来使用，不用每次都获取dom、挂在dom，轻松使用echarts的所用功能。

npm install echarts vue-echart

main.js中引入

import ECharts from 'vue-echarts'
// 注册全局的组件
Vue.component('vChart', ECharts)

vue中使用，直接添加options 数据即可。

<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: ["合格数", "超标数", "合格率", "超标率"],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: "合格数",type: "bar",barWidth: "15%",barGap: "5%",data: [20, 232, 441, 654, 770, 530, 410]},{name: "超标数",type: "bar",barWidth: "15%",data: [120, 482, 791, 834, 590, 930, 710]},{name: "合格率",type: "line",data: [420, 332, 291, 654, 590, 330, 810]},{name: "超标率",type: "line",data: [120, 232, 391, 854, 590, 730, 410]}]}};}
};
</script>

三、使用v-charts

v-charts（https://v-charts.js.org/#/）是基于vue2二次封装的图表组件库，功能没有echarts多但也够用了，官网很详细，这里用一个官网例子说明问题

<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>