以下是一个示例代码,演示如何在Vue 3中使用ECharts绘制一个横向柱状图:
<template>
<div ref="chart" style="width: 600px; height: 400px;"></div>
</template>
<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
export default {
setup() {
const chart = ref(null);
onMounted(() => {
const myChart = echarts.init(chart.value);
const option = {
title: {
text: '某个数据统计',
left: 'center',
top: 20,
textStyle: {
color: '#333',
fontSize: 16,
},
},
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: ['产品A', '产品B', '产品C', '产品D', '产品E'],
},
series: [
{
name: '销售数量',
type: 'bar',
data: [120, 200, 150, 80, 300],
},
],
};
myChart.setOption(option);
});
return {
chart,
};
},
};
</script>
在这个示例中,我们创建了一个简单的横向柱状图来展示产品销售数量。你可以根据需要进行进一步的样式和数据设置。