option ={
title: {
text: 'hhhhhhhhhh',
top: "1%",
textAlign: "center",
left: "45%",
textStyle: {
color: "#262626",
fontSize: 18,
fontWeight: "600",
},
},
tooltip: {
show: true,
trigger: "axis",
backgroundColor: "rgb(242, 244, 245)", // 设置背景颜色
textStyle: {
// color: function (param) {
// console.log(param, ";;;;;;");
// return param;
// },
fontSize: 14,
},
borderColor: "rgba(255, 255, 255, .16)",
axisPointer: {
lineStyle: {
color: "rgba(28, 124, 196)",
},
},
// formatter: "{b}人员类别统计<br>{c}人"
formatter: function (params, ticket, callback) {
var htmlStr = "";
for (var i = 0; i < params.length; i++) {
var param = params[i];
var seriesName = param.seriesName; //图例名称
var value = param.value; //y轴值
var color = param.color; //图例颜色
htmlStr += "<div>";
htmlStr +=
'<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
color +
';"></span>'; //一个点
htmlStr += `<span style="color:${param.color}">${seriesName} : ${value}个</span>`; //圆点后面显示的文本
// console.log(seriesName, value);
htmlStr += "</div>";
}
return htmlStr;
},
},
color: [
"rgb(0, 172, 73)",
"rgb(56, 154, 255)",
"rgb(162, 88, 236)",
"rgb(255, 152, 6)",
],
grid: {
top: "18%",
left: "12%",
right: "2%",
bottom: "18%",
},
xAxis: [
{
type: "category",
axisLine: {
lineStyle: {
color: "#2D4377",
},
},
axisLabel: {
interval: 0,
margin: "20",
color: "rgb(139, 143, 147)",
rotate: "26",
textStyle: {
fontSize: 14,
},
},
// axisLabel: {
// interval: 0,
// align: "center",
// rotate: "26",
// margin: "20",
// textStyle: {
// fontSize: 14,
// color: "#A9C3F0",
// },
// },
splitLine: {
show: false,
},
axisTick: {
show: false,
},
boundaryGap: true,
data: ['1月','2月','1月','2月','1月','2月','1月','2月','1月','2月','1月','2月'], //this.$moment(data.times).format("HH-mm") ,
},
],
yAxis: [
{
type: "value",
name: "单位：个",
nameTextStyle: {
//y轴上方单位的颜色
color: "rgb(139, 143, 147)",
},
// splitNumber: 6,
axisLine: {
lineStyle: {
color: "black",
},
},
splitLine: {
show: true,
lineStyle: {
color: "rgb(221, 228, 241)",
type: "dashed",
},
},
axisLabel: {
color: "rgb(139, 143, 147)",
textStyle: {
fontSize: 14,
},
},
axisTick: {
show: false,
},
},
],
series: [
{
name: "待重铸区",
type: "line",
showSymbol: true,
symbolSize: 8,
// symbol: "circle",
lineStyle: {
color: "rgb(0, 172, 73)",
},
// itemStyle: {
// color: "rgb(162, 88, 236)",
// borderColor: "rgb(162, 88, 236)",
// borderWidth: 2,
// },
itemStyle: {
// color: "#FF2E2E",
borderColor: "rgb(0, 172, 73)",
borderWidth: 2,
},
data:dataRan() , //data.values
},
{
name: "退库区",
type: "line",
showSymbol: true,
symbolSize: 8,
// symbol: "circle",
lineStyle: {
color: "rgb(56, 154, 255)",
},
itemStyle: {
color: "rgb(56, 154, 255)",
borderColor: "rgb(56, 154, 255)",
borderWidth: 2,
},
// emphasis: {
// itemStyle: {
// color: "#fff",
// borderColor: "#F39800",
// borderWidth: 2,
// },
// },
data: dataRan(), //data.values
},
{
name: "南区",
type: "line",
showSymbol: true,
symbolSize: 8,
// symbol: "circle",
lineStyle: {
color: "rgb(162, 88, 236)",
},
itemStyle: {
color: "rgb(162, 88, 236)",
borderColor: "rgb(162, 88, 236)",
borderWidth: 2,
},
// emphasis: {
// itemStyle: {
// color: "#fff",
// borderColor: "#16D6FF",
// borderWidth: 2,
// },
// },
data: dataRan(), //data.values
},
{
name: "北区",
type: "line",
showSymbol: true,
// symbol: "circle",
symbolSize: 8,
lineStyle: {
color: "rgb(255, 152, 6)",
},
itemStyle: {
color: "rgb(255, 152, 6)",
borderColor: "rgb(255, 152, 6)",
borderWidth: 2,
},
// emphasis: {
// itemStyle: {
// color: "#fff",
// borderColor: "#25D677",
// borderWidth: 2,
// },
// },
data: dataRan(), //data.values
},
],
};
function dataRan(){
return [
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
]
}