詳解如何利用JavaScript繪製堆疊柱狀圖

2022-03-16 19:00:20

效果圖

this.state.workChartList的資料結構

const workChartList = [
 { name: "居民熱線", chartData: [5, 8, 8, 7, 0, 5, 6, 5, 9, 5, 4, 7] },
 { name: "日常排程類", chartData: [5, 6, 8, 8, 5, 8, 5, 9, 8, 7, 3, 6] },
 { name: "排程預警類", chartData: [6, 8, 8, 7, 4, 6, 6, 9, 6, 8, 5, 3] },
 { name: "搶維修類", chartData: [1, 2, 3, 1, 4, 5, 6, 3, 9, 7, 8, 7] },
 { name: "物質申請類", chartData: [5, 8, 8, 7, 0, 5, 6, 5, 9, 5, 4, 7] },
 { name: "其他類", chartData: [5, 6, 8, 8, 5, 8, 5, 9, 8, 7, 6, 0] },
];

option相關程式碼關鍵是每個serise需要設定同樣的stack屬性

	var colorList = ["#72fbfd", "#56c2f9", "#2e69e9", "#7a23f5", "#8082f7", "#ab4399"];
    const xData = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
        backgroundColor: "#030e2d",
        borderColor: "#030e2d",
        textStyle: {
          fontSize: "12px",
          color: "#96A4F4",
        },
      },
      color: colorList,
      legend: {
        left: "center",
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          fontSize: "12px",
          color: "#96A4F4",
          padding: [3, 0, 0, 0],
        },
      },
      grid: {
        left: 20,
        bottom: 20,
        top: 30,
        right: 20,
      },
      xAxis: {
        name: "nn(月)",
        type: "category",
        nameTextStyle: {
          color: "#7089ba",
          fontSize: "10px"
        },
        nameGap: -9,
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "#7089ba",
            fontSize: "10px"
          },
          margin: 6, //刻度標籤與軸線之間的距離。
        },
        axisLine: {
          lineStyle: {
            color: "#414965",
          },
        },
        axisTick: {
          show: false,
        },
        data: xData,
      },
      yAxis: {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "#7089ba",
            fontSize: "10px",
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "#414965",
            opacity: 0.3,
          },
        },
      },
      series: [],
    };
    if (!this.state.workChartList) return;
    const seriesItem = this.state.workChartList;
    seriesItem.map((item, index) => {
      option.series.push({
        name: item.name,
        type: "bar",
        stack: "總數",
        barWidth: '50%',
        label: {
          show: false,
          position: "insideRight",
        },
        data: item.value,
        itemStyle: {
          normal: {
            label: {
              show: false, //開啟顯示
              position: "top", //在上方顯示
              textStyle: {
                //數值樣式
                color: "#fff",
                fontSize: "12px",
                fontWeight: 100,
              },
            },
          },
        },
      });
    });
    this.Chart_init2 = echarts.init(this.Chart_dom2.current);
    this.Chart_init2.clear();
    this.Chart_init2.setOption(option);

補充

當然JavaScript不僅能繪製堆疊柱狀圖，還能繪製折柱混合圖

效果圖：

資料結構

const nrwData = [
      { label: "10", proviceWater: "100.45", userWater: "55", nrwRate: 80.65 },
      { label: "11", proviceWater: "80", userWater: "80", nrwRate: 70 },
      { label: "12", proviceWater: "81.45", userWater: "67", nrwRate: 89 },
      { label: "01", proviceWater: "145.45", userWater: "140.45", nrwRate: 55 },
      { label: "02", proviceWater: "60.45", userWater: "45", nrwRate: 43.65 },
      { label: "03", proviceWater: "55", userWater: "50", nrwRate: 85.65 },
      { label: "10", proviceWater: "100.45", userWater: "55", nrwRate: 80.65 },
      { label: "11", proviceWater: "80", userWater: "80", nrwRate: 70 },
      { label: "12", proviceWater: "81.45", userWater: "67", nrwRate: 89 },
      { label: "01", proviceWater: "145.45", userWater: "140.45", nrwRate: 55 },
      { label: "02", proviceWater: "60.45", userWater: "45", nrwRate: 43.65 },
      { label: "03", proviceWater: "55", userWater: "50", nrwRate: 85.65 }
    ];

具體程式碼

var xData3 = nrwData?.map((item) => item.label);
const proviceWater = nrwData?.map((item) => item.proviceWater <= 0 ? 0 : item.proviceWater);
const userWater = nrwData?.map((item) => item.userWater <= 0 ? 0 : item.userWater);
const lineData = nrwData?.map((item) => item.nrwRate >= 100 ? 0 : item.nrwRate);
var option = {
      tooltip: {
        trigger: "axis",
        show: true,
        backgroundColor: "rgba(16, 34, 79, 0.9)",
        borderColor: "#274370",
        textStyle: {
          color: "#fff",
          fontSize: 8,
        }
      },
      legend: {
        show: true,
        itemWidth: 20,
        itemHeight: 10,
        itemGap: 10,
        textStyle: {
          fontSize: 10,
          color: "#ccc",
        },
      },
      grid: {
        left: 30,
        bottom: 20,
        top: 30,
        right: 30,
      },
      xAxis: {
        data: xData3,
        name: "nnn(月)",
        nameTextStyle: {
          color: "#7089ba",
          fontSize: "10px"
        },
        // 座標軸刻度相關設定
        axisTick: {
          show: false,
        },
        nameGap: -9,
        // 座標軸線的相關設定
        axisLine: {
          show: true,
          lineStyle: {
            color: "#414965",
          },
        },
        // 座標軸刻度標籤的相關設定
        axisLabel: {
          // 可以設定成 0 強制顯示所有標籤
          interval: 0,
          textStyle: {
            color: "#7089ba",
            fontSize: "10px"
          },
          margin: 10, //刻度標籤與軸線之間的距離。
        },
      },
      yAxis: [{
        type: "value",
        name: "單位：萬m³",
        nameTextStyle: {
          color: "#fff",
          fontSize: "10px"
        },
        // 座標軸在grid區域中的分隔線
        splitLine: {
          show: false,
          lineStyle: {
            color: "#414965",
            opacity: 0.3,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#7089ba",
            fontSize: "10px",
          },
        },
      },
      {
        type: "value",
        name: "產銷差（%）",
        min: 0,
        max: 100,
        nameTextStyle: {
          color: "#fff",
          fontFamily: "PingFangSC-Light",
          fontSize: "10px",
        },
        axisLabel: {
          textStyle: {
            color: "#7089ba",
            fontSize: "10px"
          }
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#414965",
            opacity: 0.3,
          },
        },
      },
      ],
      series: [
        {
          name: "供水量",
          type: "bar",
          barWidth: 10,
          itemStyle: {
            opacity: 0.1,
            normal: {
              show: true,
              color: "#8c3ed8",
              barBorderRadius: 0,
              borderWidth: 0,
            },
          },
          label: {
            show: false,//資料不進行顯示
            position: "top",
            distance: 10,
            color: "#fff",
          },
          tooltip: {
            valueFormatter: function (value) {
              return value + "萬m³";
            }
          },
          data: proviceWater,
        },
        {
          name: "用水量",
          type: "bar",
          barWidth: 10,
          itemStyle: {
            opacity: 0.1,
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#1134ac",
                },
                {
                  offset: 1,
                  color: "#4aaaf8",
                },
              ]),
              barBorderRadius: 0,
              borderWidth: 0,
            },
          },
          label: {
            show: false,//資料不進行顯示
            position: "top",
            distance: 10,
            color: "#fff",
          },
          tooltip: {
            valueFormatter: function (value) {
              return value + "萬m³";
            }
          },
          data: userWater,
        },
        /*折線圖*/
        {
          name: "產銷差",
          type: "line",
          yAxisIndex: 1,
          z: 15,
          tooltip: {
            valueFormatter: function (value) {
              return value + "%";
            }
          },
          symbol: "circle",
          // symbolSize: 10,
          itemStyle: {
            normal: {
              color: "#84fbfb",
              borderColor: "#84fbfb",  //拐點邊框顏色
              lineStyle: {
                color: "#84fbfb"//折線的顏色
              },
            },
          },
          data: lineData,
        }
      ],
    };

以上就是詳解如何利用JavaScript繪製堆疊柱狀圖的詳細內容，更多關於JavaScript柱狀圖的資料請關注it145.com其它相關文章！

詳解如何利用JavaScript繪製堆疊柱狀圖

熱門文章