echars柱形图 开发常见功能

刚做echars 和没做过echars的小白分享下经验
这个是横向的树形图 双柱形图(重点看带大括号的属性)
我讲的通俗点

var myChart = echarts.init(document.getElementById("echartContainer"));
      myChart .off("click");   //记着调用接口数据获取值时一定要加这个,目的是为了防止多次调用接口,不然页面会很卡顿
      myChart.setOption({
        grid: {   //控制canvas 画图的位置
          left: "0%",
          right: "20%",
          bottom: "2%",
          top: "0%",
          containLabel: true,
        },
        barWidth: 15,    //柱形的宽度 默认的应该是15
        xAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            //  改变x轴颜色
            lineStyle: {
              color: "transparent",
            },
          },
          axisLabel: {
            //  改变x轴字体颜色和大小
            textStyle: {
              color: "transparent",
              fontSize: 16,
            },
          },
        },
        yAxis: {
          type: "category",
          data: this.bonusSubsidyData.dataY,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            //  改变y轴颜色
            lineStyle: {
              color: "#26D9FF",
            },
          },
          axisLabel: {
            //  改变y轴字体颜色和大小
            //formatter: '{value} m³ ', //  给y轴添加单位
            textStyle: {
              color: "rgba(250,250,250,0.6)",
              fontSize: 14,
            },
          },
        },
        dataZoom: [        //数据过多的话一定要用这个属性 鼠标点击移动 可以使数据上下滚动  不加这个属性的话,数据会自适应的撑开,数据过多会导致柱形之间的重叠图形混乱
          {
            type: "inside",
            yAxisIndex: [0],
            startValue: 0,
            endValue: 5,
            width: 8, //组件宽度
            backgroundColor: "#0E64B7",
            borderColor: "none",
            zoomLock: true,   //这个属性是控制柱形图的移动
          },
        ],
        tooltip: {    //功能类似于hover
          trigger: "item",
          borderColor: "rgba(255,255,255,.3)",
          backgroundColor: "rgba(13,5,30,.6)",
          borderWidth: 1,
          padding: 5,
          formatter: function (parms) {   
            var str =
              parms.marker +
              "" +
              parms.data.name +
              "</br>" +
              "数量：" +
              parms.data.value +
              "个</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          },
        },
        series: [   //数据显示部分
          {
            type: "bar",
            barWidth: "10",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  formatter: function (params) {
                    var str = params.value + "万元";
                    return str;
                  },
                  textStyle: {
                    //数值样式
                    color: "#65F587",
                    fontSize: 14,
                    fontWeight: 600,
                  },
                },
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(101,245,135,1)",
                  },
                ]),

                borderWidth: 2,
              },
            },

            data: this.bonusSubsidyData.dataX1,  //第一条柱形
          },
          {
            type: "bar",
            barWidth: "10",
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  formatter: function (params) {
                    var str = params.value + "人";
                    return str;
                  },
                  textStyle: {
                    //数值样式
                    color: "#FDCE5A",
                    fontSize: 14,
                    fontWeight: 600,
                  },
                },
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(255,172,52,1)",
                  },
                ]),

                borderWidth: 2,
              },
            },
            data: this.bonusSubsidyData.dataX2,   //第二条柱形
          },
        ],
      });
    //树形图的点击事件 点击柱形 弹出框 显示柱形的详细数据
    var c = document.getElementsByClassName("modalBasic");
      myChart.on("click", function (params) {
        c[0].style.display = "block";
      });

红色框

legend: {
   x: '17%',  //x y 控制他们的位置 x左右 y上下 
   y: '-8%',
   textStyle: {
   fontSize: 12,
   lineHeight: 45,
   color: '#666',
      },
   data: ['校验成功发放数', '校验失败发放数', '校验成功', '校验失败']
                },

黑色框 (y轴左右两边的线可以对齐)

 yAxis: [{
    name: '单位（人）',
    type: 'value',
    splitNumber: 3 //在yAxis 中设置这个属性就好
    },]

蓝色框