怎么利用JavaScript绘制堆叠柱状图

这篇文章主要讲解了“怎么利用JavaScript绘制堆叠柱状图”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么利用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相关代码 关键是每个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: "\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: 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: "\n\n\n(月)",         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绘制堆叠柱状图这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！