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