echarts之横式柱状图

echarts之横式柱状图

文末有完整代码，可以直接复制使用

效果图

原理

设置x轴为不显示，只显示y轴

设置两个y轴，一个显示柱子，另一个只显示柱子的边框

通过设置两个y轴柱子的层次度，使得看起来像是一个柱子

该实例是在官方例子的基础上修改的

官网例子地址：https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category

简单效果图：

柱状图颜色可以自定义，数据为虚拟数据

option = {
    // 指定图形与Dom距离
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        // y轴刻度上文字与Dom边界保留距离
        containLabel: true
    },
    xAxis: {
        // 设置x轴不显示
       show:false
    },
    // 需要使用两个y轴，使用列表存储
    yAxis: [{
        type: 'category',
        data: ['印尼', '美国', '印度', '中国', '世界人口(万)'],
        // 将数据显示方式倒转
        inverse:true,
        // 不显示y轴刻度线
        axisLine:{
            show:false
        },
        // 不显示y轴刻度值
        axisTick:{
            show:false
        },
        // 设置第一个y轴上的文字颜色
        axisLabel:{
            color:"blue"
        }
    },
        {
        // 先设置第二个y轴显示
        show:true,
        data: [702, 350, 610, 793, 664],
        // 将数据显示方式倒转
        inverse: true,
        // 不显示y轴刻度线
        axisLine:{
            show:false
        },
        // 不显示y轴刻度值
        axisTick:{
            show:false
        },
        // 设置第二个y轴上文字的颜色与字号
        axisLabel:{
            textStyle:{
                fontSize:12,
                color:"blue"
            }
        }
        }
    ],
    series: [
        {
           name: '2011年',
           type: 'bar',
           data: [70, 34, 60, 78, 69],
           // 设置柱子宽度
           barWidth:10,
           // 设置第一个y轴显示的深浅度，第二个显示在第一个之上
           yAxisIndex:0,
           // 注意之间的距离
           barCategoryGap:10,
           // 设置柱子的位置，柱子上显示的内容
           label:{
               show:true,
               position:"inside",
               // {c} 表示数值，{a}表示serie名,{b}表示系列名
               formatter:"{c}%"
           },
           itemStyle:{
               // 设置柱子颜色
               color:"#1089E7",
               // 设置柱子为圆角
               barBorderRadius:10
           }
        },
        {
            name: '2012年',
            type: 'bar',
            yAxisIndex:1,
            data: [100,100,100,100,100],
            barWidth:15,
            barCategoryGap:50,
            itemStyle:{
                // 设置第二个y轴柱子无颜色
                color:"none",
                // 设置第二个y轴柱子有边框
                borderColor:"#00c1de",
                // 设置第二个y轴柱子的宽度
                borderWidth:3,
                // 设置第二个y轴柱子边框为圆角
                barBorderRadius:15
            }
            
        }
    ]
};

完整代码

只需修改第一行中的 document.querySelector(".chart") 为你自己的html中的div即可

document.querySelector(".chart") 是css选择器的写法，我的div的class为chart

如果你使用的是id，修改为document.getElementById(‘yourid’) 即可

// 1、实例化eacharts对象
  var myChart = echarts.init(document.querySelector(".chart"));

  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  // 2、设置图象样式和数据
  var option = {
    // 声明颜色数组
    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%",
      containLabel: false,
    },
    // 不显示x轴
    xAxis: {
      show: false,
    },

    yAxis: [
      {
        type: "category",
        data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
        inverse: true,
        axisLine: {
          // 不显示y轴线条
          show: false,
        },
        axisTick: {
          // 不显示y轴刻度值
          show: false,
        },
        axisLabel: {
          // 设置y轴刻度标签（即y轴上的文字）
          color: "#fff",
        },
      },
      {
        show: true,
        data: [702, 350, 610, 793, 664],
        inverse: true,
        // 不显示刻度线
        axisLine: {
          show: false,
        },
        // 不显示刻度值
        axisTick: {
          show: false,
        },
        // 显示刻度标签，即文字
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
      },
    ],
    series: [
      {
        name: "条",
        type: "bar",
        // inverse: true,

        data: [70, 34, 60, 78, 69],
        // 主子修改为圆角
        itemStyle: {
          barBorderRadius: 10,
          color: function (params) {
            return myColor[params.dataIndex];
          },
        },
        // 柱子之间的距离
        barCategoryGap: 10,
        // 柱子的宽度
        barWidth: 10,
        label: {
          show: true,
          position: "inside",
          formatter: "{c}%",
        },
      },
      {
        name: "框",
        type: "bar",
        yAxisIndex: 1,
        data: [100, 100, 100, 100, 100],
        // 主子的间距
        barCategoryGap: 50,
        // 柱子的宽度
        barWidth: 15,
        // 主子的样式
        itemStyle: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 3,
          barBorderRadius: 15,
        },
      },
    ],
  };

  myChart.setOption(option);

  // 图形自适应屏幕大小
  window.addEventListener("resize", function () {
    myChart.resize();
  });