需求:使用echarts绘制一个以y轴为数据的柱状图
<template>
<div class="mt-6">
<div id="myChart" style="width: 100%; height: calc(100vh - 300px);"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
const labelOption = {
show: true,
// rotate: -1,
// align: "left",
verticalAlign: "middle",
// position: "insideBottom",
// distance: 15,
formatter: "{a}",
// fontSize: 16,
// color:'#fff'
};
export default {
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
legend: {},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
},
yAxis: {
type: "category",
data: [
"2022/2/2",
"2022/2/10",
"2022/2/15",
"2022/2/20",
"2022/2/25",
],
},
series: [
{
name: "鱼眼",
type: "bar",
data: [100, 23, 233, 455, 322, 566],
label: labelOption,
},
{
name: "吃饭",
type: "bar",
data: [183, 289, 134, 170, 144, 230],
label: labelOption,
},
{
name: "睡觉",
type: "bar",
data: [125, 238, 310, 194, 141, 87],
label: labelOption,
},
{
name: "学习",
type: "bar",
data: [125, 238, 310, 194, 141, 607],
label: labelOption,
},
{
name: "娱乐",
type: "bar",
data: [195, 238, 310, 124, 141, 607],
label: labelOption,
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
</style>
当数据过多,显示不全的时候,在相应的轴上加上axisLabel属性
axisLabel: {
interval:0,
show: true,
textStyle: {
// color: "#a9a9a9", //更改坐标轴文字颜色
fontSize: 10 //更改坐标轴文字大小
},
rotate: 40,
showMinLabel: true,//显示最小值
showMaxLabel: true,//显示最大值
},