Echarts柱状图的数值显示、柱宽度、横向柱状图

最新推荐文章于 2024-05-09 10:40:15 发布

H20220803

最新推荐文章于 2024-05-09 10:40:15 发布

阅读量2.8k

点赞数

本文链接：https://blog.csdn.net/H20220803/article/details/126151582

版权

Echarts 柱状图横向柱状图数值显示数据可视化

关键词由CSDN通过智能技术生成

Echarts柱状图的数值显示、柱宽度、横向柱状图
在这里插入图片描述

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  mounted() {
    var BarChart = echarts.init(document.getElementById("barChart"));
    let xDataArr = ["张三", "李四", "王五","闰土","小明", "茅台","二妞", "大强"];
    let yDataArr = [88, 92, 63, 77, 94, 80, 72, 86];
    let option = {
      xAxis: {
        type: "value", //横向柱状图，交换xAxis和yAxis的type
      },
      yAxis: {
        type: "category",
        data: xDataArr,
      },
      series: [
        {
          label: {
            //数据显示的位置
            show: true, //数值是否显示
            rotate: 60, //数值显示的角度
            position: "top", //数值相对于柱状图显示的位置
          },
          barWidth: "30%", //柱的宽度
        },
      ],
    };
    BarChart.setOption(option);
  },
};
</script>