echarts横向柱状图


    //图表方法
    drawLine(xData,sData) {
      let myChart = echarts.init(document.getElementById("chart"));
      let option = {
        //color: ['rgba(68, 222, 192, 1)'],//柱状图颜色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          top: "0%",
          left: "1%",
          right: "2%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: {
          show: false,
          type: "value",
          boundaryGap: [0, 0.01],
          axisLine: { show: false },
          axisTick: { show: false }, //刻度
          splitLine: { show: false }, //网格
        },
        yAxis: {
          type: "category",
          data: xData,
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: {
            textStyle: {
              color: "rgba(84, 106, 135, 1)",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: "14", //设置宽度
            itemStyle: { normal: { color: "rgba(68, 222, 192, 1)" } }, //柱状图颜色
            showBackground: true,
            backgroundStyle: {//设置柱状图背景颜色
              color: "#fff",
            },
            data: sData,
          },
        ],
      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM