详解如何利用JavaScript绘制堆叠柱状图

效果图

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相关代码 关键是每个ri需要设置同样的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: "\n\n(月)",        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: fal,        },        data: xdata,      },      yaxis: {        type: "value",        axislabel: {          textstyle: {            color: "#7089ba",            fontsize: "10px",          },        },        axisline: {          show: fal,        },        axistick: {          show: fal,        },        splitline: {          linestyle: {            color: "#414965",            opacity: 0.3,          },        },      },      ries: [],    };    if (!this.state.workchartlist) return;    const riesitem = this.state.workchartlist;    riesitem.map((item, index) => {      option.ries.push({        name: item.name,        type: "bar",        stack: "总数",        barwidth: '50%',        label: {          show: fal,          position: "insideright",        },        data: item.value,        itemstyle: {          normal: {            label: {              show: fal, //开启显示              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.toption(option);

补充

当然javascript不仅能绘制堆叠柱状图，还能绘制折柱混合图

效果图：

数据结构

const nrwdata = [      { label: "10", provicewater: "100.45", urwater: "55", nrwrate: 80.65 },      { label: "11", provicewater: "80", urwater: "80", nrwrate: 70 },      { label: 利润计算公式"12", provicewater: "81.45", urwater: "67", nrwrate: 89 },      { label: "01", provicewater: "145.45", urwater: "140.45", nrwrate: 55 },      { label: "02", provicewater: "60.45", urwater: "45", nrwrate: 43.65 },      { label: "03", provicewater: "55", urwater: "50", nrwrate: 85.65 },      { label: "10", provicewater: "100.45", urwater: "55", nrwrate: 80.65 },      { label: "11", provicewater: "80", urwater: "80", nrwrate: 70 },      { label: "12", provicewater: "81.45", urwater: "67", nrwrate: 89 },      { label: "01", provicewater: "145.45", urwater: "140.45", nrwrate: 55 },      { label: "02", provicewater: "60.45", urwater: "45", nrwrate: 43.65 },      { label: "03", provicewater: "55", urwater: "50", nrwrate: 85.65 }    ];

具体代码

var xdata3 = nrwdata?.map((item) => item.label);const provicewater = nrwdata?.map((it其实很简单em) => item.provicewater <= 0 ? 0 : item.provicewater);const urwater = nrwdata?.map((item) => item.urwater <= 0 ? 0 : item.urwater);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: "\n\n\n(月)",  火锅蘸料配方      nametextstyle: {          color: "#7089ba",          fontsize: "10px"        },        // 坐标轴刻度相关设置        axistick: {          show: fal,        },        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: fal,          linestyle: {            color: "#414965",            opacity: 0.3,          },        },        axistick: {          show: fal,        },        axisline: {          show: fal,        },        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: fal英语一月怎么读,        },        axisline: {          show: fal,        },        splitline: {          show: true,          linestyle: {            color: "#414965",            opacity: 0.3,          },        },      },      ],      ries: [        {          name: "供水量",          type: "bar",          barwidth: 10,          itemstyle: {            opacity: 0.1,            normal: {              show: true,              color: "#8c3ed8",              barborderradius: 0,              borderwidth: 0,            },          },          label: {            show: fal,//数据不进行显示            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, [                {                  offt: 0,                  color: "#1134ac",                },                {                  offt: 1,                  color: "#4aaaf8",                },              ]),              barborderradius: 0,              borderwidth: 0,            },          },          label: {            show: fal,//数据不进行显示            position: "top",            distance: 10,            color: "#fff",          },          tooltip: {            valueformatter: function (value) {              return value + "万m³";            }          },          data: urwater,        },        /*折线图*/        {          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柱状图的资料请关注www.887551.com其它相关文章！