🐱 个人主页:TechCodeAI启航,公众号:SHOW科技
🙋♂️ 作者简介:2020参加工作,专注于前端各领域技术,共同学习共同进步,一起加油呀!
💫 优质专栏:前端主流技术分享
📢 资料领取:前端进阶资料可以找我免费领取
🔥 摸鱼学习交流:我们的宗旨是在「工作中摸鱼,摸鱼中进步」,期待大佬一起来摸鱼!
首先安装 Echarts:
npm install echarts --save
在 Vue 3 中,你可以通过封装一个组件来实现 Echarts 图表的可定制化,并且根据传入的参数绘制不同样式的图表。下面是一个简单的示例:
创建一个名为
EchartsChart
的组件:
<template>
<div ref="chart" :style="chartStyle"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
props: {
chartData: { // 接收数据的参数
type: Array,
required: true
},
chartOptions: { // 接收配置项的参数
type: Object,
required: true
},
chartStyle: { // 接收样式的参数
type: Object,
default: () => ({ width: '400px', height: '300px' })
}
},
mounted() {
this.initChart();
},
methods: {
initChart() {
const chart = echarts.init(this.$refs.chart);
chart.setOption(this.chartOptions);
chart.setOption({
series: [
{
type: 'bar',
data: this.chartData
}
]
});
}
}
};
</script>
在需要使用图表的页面中,导入并使用
EchartsChart
<template>
<div>
<EchartsChart
:chartData="data1"
:chartOptions="options1"
:chartStyle="style1"
/>
<EchartsChart
:chartData="data2"
:chartOptions="options2"
:chartStyle="style2"
/>
</div>
</template>
<script>
import EchartsChart from '@/components/EchartsChart.vue';
export default {
components: {
EchartsChart
},
data() {
return {
data1: [120, 200, 150, 80, 70],
options1: {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
grid: {
left: '10%',
right: '10%',
bottom: '5%',
containLabel: true
}
},
style1: { width: '400px', height: '300px' },
data2: [50, 100, 120, 80, 90],
options2: {
xAxis: {
type: 'category',
data: ['F', 'G', 'H', 'I', 'J']
},
yAxis: {},
grid: {
left: '10%',
right: '10%',
bottom: '5%',
containLabel: true
}
},
style2: { width: '600px', height: '400px' }
};
}
};
</script>
上述示例中,EchartsChart
组件接收 chartData
、chartOptions
和 chartStyle
三个参数,分别用于传入图表的数据、配置项和样式。在 mounted
钩子函数中,通过 echarts.init
初始化图表实例,并利用传入的参数进行绘制。
在需要使用图表的页面中,可以多次调用 EchartsChart
组件,并分别传入不同的参数进行绘制。确保每个图表组件都有独立的引用,避免只显示一个的问题。
请注意,上述示例仅提供了基本的封装思路,具体的数据、配置项和样式需要根据自己的实际需求进行调整。