在 Vue 中集成 ECharts 并绘制一个躺着的柱状图(即横向的柱状图),你可以通过设置 ECharts 的 bar
类型,并配置 xAxis
和 yAxis
来实现。下面是一个完整的 Vue 示例代码。
示例代码:
<template><div id="bar-chart" style="width: 600px; height: 400px;"></div>
</template><script>
import * as echarts from 'echarts';export default {name: 'HorizontalBarChart',mounted() {this.initChart();},methods: {initChart() {var chartDom = document.getElementById('bar-chart');var myChart = echarts.init(chartDom);var option = {title: {text: 'Horizontal Bar Chart Example',left: 'center'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},xAxis: {type: 'value', // 横向的柱状图,X 轴是数值轴boundaryGap: [0, 0.01]},yAxis: {type: 'category', // Y 轴是类目轴data: ['Category A', 'Category B', 'Category C', 'Category D']},series: [{name: 'Value',type: 'bar', // 柱状图类型data: [335, 410, 234, 543],itemStyle: {color: '#3398DB'}}]};// 设置配置项并显示图表myChart.setOption(option);}}
};
</script><style scoped>
#bar-chart {width: 100%;height: 100%;
}
</style>
代码说明:
-
HTML 部分:
<div id="bar-chart"></div>
是用来容纳 ECharts 图表的 DOM 元素。在mounted()
钩子中初始化图表。 -
JavaScript 部分:
echarts.init()
:将容器元素传递给echarts.init
,初始化图表实例。xAxis
和yAxis
:xAxis
设为value
类型,因为横向的柱状图的 X 轴是数值轴。yAxis
设为category
,用于展示分类数据,如Category A
、Category B
。
series
:type
设为bar
,表示柱状图类型。data
用来展示每个类目对应的数据值。
-
样式:使用
scoped
的 CSS 确保图表容器的宽度和高度适配父级元素。
效果
- 这是一个简单的横向柱状图,柱子沿 X 轴水平方向排列,而 Y 轴用来显示不同的分类。
- 你可以根据实际需求调整图表的标题、颜色、数据等。
扩展:
- 你可以添加更多的
series
项,生成多组数据的横向柱状图。 - 通过配置
tooltip
和legend
,你可以使图表的交互更加丰富。
如果你需要动态更新图表数据或更多自定义样式,可以在 Vue 中结合 props
或 data
使用。