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. 本期的教程到了这里完结啦!