详解如何利用JavaScript绘制堆叠柱状图
最新回答
罂语
2024-11-28 09:10:15
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] },];
然后设置图表的基本配置，包括颜色、图例、网格等：
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: [], };
根据数据结构，生成堆叠柱状图的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.chartData, itemStyle: { normal: { label: { show: false, position: "top", textStyle: { color: "#fff", fontSize: "12px", fontWeight: 100, }, }, }, }, }); });
最后，通过ECharts初始化图表并设置选项：
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: { interval: 0, textStyle: {color: "#7089ba",fontSize: "10px" }, margin: 10, }, }, yAxis: [{ type: "value", name: "单位：万m3", nameTextStyle: { color: "#fff", fontSize: "10px" }, 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 + "万m3";} }, 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 + "万m3";} }, data: userWater, }, { name: "产销差", type: "line", yAxisIndex: 1, z: 15, tooltip: {valueFormatter: function (value) { return value + "%";} }, symbol: "circle", itemStyle: {normal: { color: "#84fbfb", borderColor: "#84fbfb", lineStyle: { color: "#84fbfb" },}, }, data: lineData, } ], };
热门标签
