echarts多型柱状图配置
1.电脑系统 windows10 专业版
2.代码如下:
let bottom2cx: any = { tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器，坐标轴触发无效 type: "shadow", // 默认为直线，可选为：'line' | 'shadow' }, }, legend: { data: ["打算加工数", "理论加工数", "合格数", "产线节奏"], itemWidth: 30, itemHeight: 20, top: "5%", textStyle: { fontSize: 16, //字体大小 color: "wheat", //字体色彩 }, }, grid: { top: "14%", left: "3%", right: "4%", // bottom: "3%", containLabel: true, }, xAxis: { type: "value", show: false, }, yAxis: { type: "category", data: [ "拆卸一线", "拆卸二线", // "拆卸三线", // "拆卸四线", // "拆卸五线", // "拆卸六线", // "拆卸七线", // "拆卸八线", // "拆卸九线", // "拆卸十线", // "拆卸十一线", // "拆卸十二线", // "拆卸十三线", // "拆卸十四线", // "拆卸十五线", // "拆卸十六线", // "拆卸十七线", // "拆卸十八线" ], axisLabel: { // 管制y轴刻度显示 show: true, textStyle: { color: "wheat", }, }, // data: [ // "拆卸一线", // "拆卸二线", // "拆卸三线", // "拆卸四线", // "拆卸五线", // "拆卸六线", // "拆卸七线", // "拆卸八线", // "拆卸九线", // "拆卸十线", // "拆卸十一线", // "拆卸十二线", // "拆卸十三线", // "拆卸十四线", // "拆卸十五线", // "拆卸十六线", // "拆卸十七线", // "拆卸十八线", // "拆卸十九线", // "拆卸二十线", // ], }, series: [ { name: "打算加工数", type: "bar", stack: "总量", label: { show: true, position: "insideRight", }, // data: [320, 302, 301, 334, 390, 330, 320, 415, 300, 360], data: [320, 302], }, { name: "理论加工数", type: "bar", stack: "总量", label: { show: true, position: "insideRight", }, // data: [120, 132, 101, 134, 90, 230, 210, 600, 400, 500], data: [120, 132], }, { name: "合格数", type: "bar", stack: "总量", label: { show: true, position: "insideRight", }, // data: [150, 212, 201, 154, 190, 330, 410, 670, 301, 340], data: [150, 212], }, ], };3.成果如如下:
4.本期的教程到了这里完结啦!