How to use JavaScript to draw stacked histogram
This article mainly explains "how to use JavaScript to draw stacked bar chart", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use JavaScript to draw stacked bar chart" bar!
Effect picture
Data structure of this.state.workChartList
Const workChartList = [{name: "resident hotline", chartData: [5, 8, 8, 7, 0, 5, 6, 5, 5, 9, 5, 4, 7]}, {name: "daily scheduling class", chartData: [5, 6, 8, 8, 5, 8, 5, 9, 9, 8, 7, 3, 6]}, {name: "dispatching early warning class", chartData: [6, 8, 8, 7, 4, 6, 6, 9, 6, 8, 5 3]}, {name: "preemptive maintenance class", chartData: [1, 2, 3, 1, 4, 5, 6, 3, 9, 7, 8, 7]}, {name: "substance application class", chartData: [5, 8, 8, 7, 0, 5, 6, 5, 5, 9, 4, 7]}, {name: "other classes", chartData: [5, 6, 8, 8, 5, 9, 8, 7, 6. 0]},]
The key to option-related code is that each serise needs to set the same stack property.
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 (month)", type: "category", nameTextStyle: {color: "# 7089ba", fontSize: "10px"}, nameGap:-9, axisLabel: {interval: 0 TextStyle: {color: "# 7089ba", fontSize: "10px"}, margin: 6, / / the distance between the scale label and the axis. }, 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: 414965,},} }, series: [],} If (! this.state.workChartList) return; const seriesItem = this.state.workChartList SeriesItem.map ((item, index) = > {option.series.push ({name: item.name, type: "bar", stack: "Total", barWidth:'50% total, label: {show: false, position: "insideRight",}, data: item.value ItemStyle: {normal: {label: {show: false, / / turn on display position: "top", / / display textStyle: {/ / numerical style color: "# fff", fontSize: "12px" at the top FontWeight: 100,}) }); this.Chart_init2 = echarts.init (this.Chart_dom2.current); this.Chart_init2.clear (); this.Chart_init2.setOption (option)
Supplement
Of course, JavaScript can not only draw stacked column chart, but also fold column mixed chart.
Effect picture:
Data structure
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}]
Specific code
Var xData3 = nrwData?.map ((item) = > item.label); const proviceWater = nrwData?.map ((item) = > item.proviceWater item.userWater 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 (month)", nameTextStyle: {color: "# 7089ba", fontSize: "10px"}, / / axis scale related settings axisTick: {show: false,}, nameGap:-9 / / related settings for axis lines axisLine: {show: true, lineStyle: {color: "# 414965",},}, / / related settings for axis scale labels axisLabel: {/ / can be set to 0 to force all labels interval: 0 TextStyle: {color: "# 7089ba", fontSize: "10px"}, margin: 10, / / the distance between the scale label and the axis. },}, yAxis: [{type: "value", name: "Units: 10,000 m ³", nameTextStyle: {color: "# fff", fontSize: "10px"}, / / the dividing line of the axis in the grid area splitLine: {show: false LineStyle: {color: "# 414965", opacity: 414965,}, axisTick: {show: false,}, axisLine: {show: false,}, axisLabel: {textStyle: {color: "# 7089ba" FontSize: "10px",}, {type: "value", name: "difference between production and marketing (%)", 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: 414965,},], series: [{name: "Water supply", type: "bar", barWidth: 10, itemStyle: {opacity: Normal: {show: true, color: "# 8c3ed8", barBorderRadius: 0, borderWidth: 0,},}, label: {show: false,// data is not displayed position: "top", distance: 10 Color: "# fff",}, tooltip: {valueFormatter: function (value) {return value + "10000 m ³" }, data: proviceWater,}, {name: "Water consumption", 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,// data is not displayed position: "top", distance: 10, color: "# fff",} Tooltip: {valueFormatter: function (value) {return value + "10000 m ³" }, data: userWater,}, / * Line Chart * / {name: "production and Marketing difference", type: "line", yAxisIndex: 1, z: 15, tooltip: {valueFormatter: function (value) {return value + "%" }, symbol: "circle", / / symbolSize: 10, itemStyle: {normal: {color: "# 84fbfb", borderColor: "# 84fbfb" / / inflection point border color lineStyle: {color: "# 84fbfb" / / broken line color}, data: lineData,}],} Thank you for your reading, the above is "how to use JavaScript to draw stacked bar chart" content, after the study of this article, I believe you on how to use JavaScript to draw stacked bar chart this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
