echarts柱状图的x轴（刻度、标签名、刻度线），y轴（单位、刻度线样式（虚线、实线、）、字体样式（颜色、大小），图例排列 、柱状宽度、颜色，柱状背景）完整的柱状图

完整的数据大屏柱状图要从哪些方面考虑

1.x轴要考虑那些？

1. 标签文字要不要

2.刻度要不要

3.x轴的颜色要不要

例子三要素

代码对应的是我上面最终的样式

  xAxis: [
          {
            type: "category",
            data:XLabel,
            axisTick: {
              // 轴刻度
              show: false,
            },
            axisLabel: {
              // 轴文字
              show:false,
              color: "#A0B2D3",
              fontSize: 12,
            },
            axisLine: {
              // 轴线
              show: true,
              color:'#268C8C',
            },
          },
        ],

2.y轴要考虑那些？

1.字体颜色、字体大小

2.单位 单位和字体不一样单位的配置有三种方式

放一个单位配置的文档你要用哪个 这个是segmentfault的作者写的我只是借鉴参考https://segmentfault.com/a/1190000040213263

3.网格线的type是否是虚线

4.网格线的间距(这个我不需要，需要的百度一下很方便的)

 yAxis: [
          {
            type: "value",
            name: "单位：个",
            nameTextStyle: {
              color: "#268C8C",
              fontSize: 12,
              padding: [0, 0, 10, -30], //name文字位置 对应 上右下左
            },
            axisTick: {
              // 轴刻度
              show: false,
            },
            splitLine: {
              // 网格线
              show: true,
              lineStyle: { //分割线
              color: "#268C8C",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
             }
            },
            axisLine: {
              // 轴线
              show: false,
            },
            axisLabel: {
              // 轴文字
              color: "#268C8C",
              fontSize: 12,
            },
          },
        ],

3.柱子要考虑那些？

1.颜色

2.宽度

3.间距（这里我强调一下 我的柱子与图例对应，用的是不同的series，如果用同一系列柱子，那么图例只有一个。想要多个图例与其对应，需要设置多个柱子）

然后自己将其抽取出来 map、函数都行

4.柱子上的背景颜色

5.柱子上的数字

4.图例要考虑那些？

图例的配置自己看一下我的 和这里的方法------>别人的博客

大约就这些，将例子放在对应的option上，就可以实现效果

   let datas = [
        { value: 390, name: "党委(党组)会" },
        { value: 435, name: "懂事会" },
        { value: 380, name: "职代会" },
        { value: 284, name: "股东会" },
        { value: 180, name: "经理层办公室" },
        { value: 260, name: "其他" },
      ];
      let seriesArr= [];//series
      let XLabel = [];//x轴数据
      datas.map((item, index) => {
        XLabel.push(item.name);
        let obj = {};
        obj.name = item.name;
        obj.type = "bar";
        obj.barWidth = 15;
        obj.stack = "广告";
        obj.showBackground = true;
        // obj.backgroundStyle.color = rgba(2, 253, 253, 0.27);
        // obj.backgroundStyle.color = 'rgba(2, 253, 253, 0.27)';
        obj.data = [];
        for (var i = 0; i <= index; i++) {
          if (i != index) {
            obj.data.push(0);
          } else {
            obj.data.push(item.value);
          }
        }
        seriesArr.push(obj);
      });
      var option = {
        color: ["#02FDFD", "#DAA12E", "#0593D4", "#035DDC", "#7668E9", "#E6D54A"],
        legend: [
          {
             align: "left",
          bottom: "3%",
          left: "center",
          itemGap: 29,
          itemWidth: 13,
          itemHeight: 13, //图例宽高
          textStyle: {
            color: "#A0B2D3",
            fontSize: 12,
            // padding:[5, 10 ]
          },
           data:['股东会', '经理层办公室', '其他']
          },
             {
                align: "left",
          bottom: "7%",
          left: "center",
          itemGap: 25,
          itemWidth: 13,
          itemHeight: 13, //图例宽高
          textStyle: {
            color: "#A0B2D3",
            fontSize: 12,
            // padding:[5, 10 ]
          },
         
          data:[ '懂事会', '职代会' ,'党委(党组)会']
          },
         
          ],
        
        grid: {
          // show:true,
          left: "5%",
          right: "5%",
          bottom: "15%",
          containLabel: true,
        },
        tooltip: {
          //trigger: 'axis',    //显示其他分类
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          // formatter: function (params) {
          //   return (
          //     '<span style="font-size:20px">' +
          //     params.name +
          //     "<br/>" +
          //     params.marker +
          //     '<span style="color:' +
          //     params.color +
          //     ';font-size:20px;">' +
          //     params.value +
          //     "个" +
          //     "</span>" +
          //     "</span>"
          //   );
          // },
        },
        xAxis: [
          {
            type: "category",
            data:XLabel,
            axisTick: {
              // 轴刻度
              show: false,
            },
            axisLabel: {
              // 轴文字
              show:false,
              color: "#A0B2D3",
              fontSize: 12,
            },
            axisLine: {
              // 轴线
              show: true,
              color:'#268C8C',
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：个",
            nameTextStyle: {
              color: "#268C8C",
              fontSize: 12,
              padding: [0, 0, 10, -30], //name文字位置 对应 上右下左
            },
            axisTick: {
              // 轴刻度
              show: false,
            },
            splitLine: {
              // 网格线
              show: true,
              lineStyle: { //分割线
              color: "#268C8C",
              width: 1,
              type: "dashed" //dotted：虚线 solid:实线
             }
            },
            axisLine: {
              // 轴线
              show: false,
            },
            axisLabel: {
              // 轴文字
              color: "#268C8C",
              fontSize: 12,
            },
          },
        ],
        //series:[
          // {
          //   name: "直接访问",
          //   type: "bar",
          //   barWidth: 25,
          //   stack: "广告",
          //   data: [320],
          // },
          // {
          //   name: "邮件营销",
          //   type: "bar",
          //   barWidth: 25,
          //   stack: "广告",
          //   data: [0, 132],
          // },
          // {
          //   name: "联盟广告",
          //   type: "bar",
          //   stack: "广告",
          //   barWidth: 25,
          //   data: [0, 0, 191],
          // },
          // {
          //   name: "视频广告",
          //   type: "bar",
          //   barWidth: 25,
          //   stack: "广告",
          //   data: [0, 0, 0, 154],
          // },
        series: seriesArr,
      };

我是从这里拷贝的出来的，大家直接放到这里就可以看
下面再放几个例子的网站

网址

网址

网址