Echarts 横向柱状图

最新推荐文章于 2024-09-14 08:41:19 发布

昨夜太平长安888

最新推荐文章于 2024-09-14 08:41:19 发布

阅读量1.8w

点赞数 8

分类专栏： Vue ECharts 文章标签： vue.js echarts

本文链接：https://blog.csdn.net/HelloWord176/article/details/113373780

版权

Vue 同时被 2 个专栏收录

59 篇文章 3 订阅

订阅专栏

ECharts

3 篇文章 0 订阅

订阅专栏

实例图片：

横向显示
将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示

    placeCharts() {
      let myChart = this.$echarts.init(sportIMg);
      myChart.setOption({
        grid: {
          left: "15",
          containLabel: true,
        },
        xAxis: [
          //x轴数据设置
          {
            type: "value",
            name: "人数",
            min: 0,
            // max: 150,
            //interval: 30, //间隔数
            // splitNumber: 5,
            axisLabel: {
              formatter: "{value} ",
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              //这是y轴文字颜色
              lineStyle: {
                color: "#65C6E7",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            offset: 0,
            axisLine: {
              //这是x轴文字颜色
              lineStyle: {
                color: "#65C6E7",
              },
            },
            data: this.palceDatas,
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            data: this.palceNum,
            type: "bar",
            barWidth: 22,
            label: {
              normal: {
                show: true,
                // position: "right",
              },
            },
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                  var colorList = [
                    "#855BD7",
                    "#4B6FB8",
                    "#0F6E43",
                    "#B69C2B",
                    "#2588BB",
                    "#BB612D",
                    "#1D9394",
                    "#C24545",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      });
    },