this.title = {
text: "各车间每周产出数据",
x: "center",
textStyle: {
color: '#fff',//标题颜色
fontWeight: "bold",//粗体
fontSize: 24 //字体大小
}
};
this.yAxis = {
axisLabel: {
show: true,
textStyle: {
color: "white", //这里是改变字体颜色
fontSize: 18 //字体大小
}
}
};
this.xAxis = [
{
data: [
"裁床部",
"车缝部",
"电绣部",
"喷印部",
"手工部",
"塑胶包装部",
],
name: "日期",
axisLabel: {
show: true,
textStyle: {
color: "white",
fontSize: 18
}
}
}
];
this.series = [
{
name: "下单量",
type: "bar",
barWidth: "50%",//这里是改变柱子的宽度
data: [1050, 5200, 20000, 3304, 3900, 4900],
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function(params) {
var colorList = [
"#65d186",
"#f67287",
"#f29e3c",
"#c05bdd",
"#f29e3c",
"#7a65f2",
]; //每根柱子的颜色
return colorList[params.dataIndex];
}
},
}
}];
图形样式设置 //
chartData2: {
columns: ["日期", "访问用户", "下单用户", "下单率"],
rows: [
{ 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
{ 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
{ 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
{ 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
{ 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
{ 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
]
},
chartData1: {
columns: ["日期", "访问用户", "下单用户", "下单率"],
rows: [
{ 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
{ 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
{ 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
{ 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
{ 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
{ 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
]
}, 数据设置 默认的一些东西