vue echarts 柱状图
时间: 2023-11-07 09:05:53 浏览: 47
在Vue中使用echarts绘制柱状图,可以通过安装echarts并在Vue组件中引入echarts库来实现。首先,你需要安装echarts,可以使用npm或yarn进行安装。然后,你可以在Vue组件中使用import语句引入echarts库。接下来,在mounted钩子函数中初始化echarts实例,并使用setOption方法设置柱状图的配置项和数据。最后,可以通过resize事件监听窗口大小的变化,调整图表的大小。下面是一个使用echarts绘制基本柱状图的Vue完整代码示例:
```html
<template>
<div class="echart" id="mychart" :style="myChartStyle"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
yData: [23, 24, 18, 25, 27, 28, 25], //数据
myChartStyle: {
float: "left",
width: "100%",
height: "400px"
} //图表样式
};
},
mounted() {
this.initEcharts();
},
methods: {
initEcharts() {
// 基本柱状图
const option = {
xAxis: {
data: this.xData
},
yAxis: {},
series: [
{
type: "bar", //形状为柱状图
data: this.yData
}
]
};
const myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
}
}
};
</script>
```
如果要绘制多列柱状图,可以在series数组中添加多个对象,每个对象代表一列数据。每个对象中都需要设置type为"bar",并设置对应的data数据。可以根据需要自定义柱状图的样式,如柱条样式、柱条间距等。另外,你还可以实现动态排序柱状图。以上是关于在Vue中使用echarts绘制柱状图的基本步骤和代码示例。