echarts 柱状图设置大全（更新中）

<template>
 <div id = "option"></div>    
</template> 
<script> 
mounted() {
    let myChart1 = this.$echarts.init(document.getElementById("option"));
    //设置echarts对象的option属性
    myChart1.setOption(option);
    let option = { 
    tooltip: {      //图例设置
        trigger: "item",
        formatter: (params) => {
          let tooltipShow = "";
          tooltipShow +=
            "<div>" +
            "<div style='color:#FEEBE1;fontSize:14px;width:68px;font-weight:400;margin- 
             bottom:10px'>这是标题</div>" +
            "<div style='display:flex;flex-wrap:nowrap;align-items:center'>" +
            "<div style='display:flex;flex-wrap:nowrap;align-items:center'>" +
            "<div style='background-image:linear-gradient(rgba(177,80,29,0.9),rgba(175, 
             79, 29, 0.1));width:10px;height:10px;margin-right:10px;'></div>" +
            "<div style='color:#A49C98;fontSize:14px;margin-right:40px;'>人数</div>" +
            "</div>" +
            "<div style='color:#FEEBE1;font-size: 16px;font-weight: 500;'>{{params.data}} 
            </div>" +
            "</div>" +
            "</div>";
          return tooltipShow;
        },
        confine: true, // 是否将 tooltip 框限制在图表的区域内
        backgroundColor: "rgba(26,25,29,0.3)", //设置背景颜色

        textStyle: {
          color: "#A49C98", //设置文字颜色
          fontSize: "14",
        },
        padding: [12, 20], //文字与提示框的边距
        extraCssText: "border:1px solid #3D3C3A;", //额外的CSS样式
      },     
      legend: {
        itemWidth: 12,    //图例的宽
        itemHeight: 12,   //图例的高
        show: true,  //是否显示图例
        left: "8%",  //图例距离左方位置
        top: "2%",   //图例距离上方位置
        textStyle: {
          color: "#A49C98", // 图例文字的颜色。
        },
      },
      grid: {         //柱状图位置
        top: "21%",
        left: "10%",
        right: "5%",
        bottom: "8%",
      },
      xAxis: {
        type: "category",
        axisLine: {
          //x轴坐标轴，false为隐藏，true为显示
          show: true,
          lineStyle: {
               color: "#3D3C3A",  //x轴的颜色
               width: 1,       //x轴的宽度
               type: "solid"
        }
       },
        axisTick: {
          //x轴刻度线
          show: false,
        },
        axisLabel: {
          textStyle: {
            //改变xy轴上文字的颜色 字号
            color: "#A49C98",
            fontSize: "12px",
          },
        },

        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
      yAxis: {
        type: "value",
        splitLine: {
          show: false, //隐藏y轴虚线（横）
        },
      },
      series: [
        {
          name: "人数",
          data: [120, 200, 150, 80, 70, 110, 130, 80, 70, 110, 130, 70],
          type: "bar",
          barWidth: "10px", //柱状图粗细
          itemStyle: {      
            normal: {    //柱状图渐变色
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {        
                  offset: 0.1,        
                  color: "rgba(177,80,29,0.1)",
                },
                {
                  offset: 0.9,
                  color: "rgba(31,31,31,0.9)",
                },
              ]),
              opacity: 1,
            },
          },
        },
      ],
    };

  },
};
</script>