<el-row :gutter="20">
本月维修数量(件)
自从上周以来
20%
正在维修(件)
自从上周以来
20%
本月维修费用(万元)
自从上周以来
20%
器材消耗数量(个)
自从上周以来
20%
start-placeholder="开始日期" end-placeholder="结束日期">
维修任务排名
style="margin-left: 0px">近三月
维修费用排名
style="margin-left: 0px">近三月
start-placeholder="开始日期" end-placeholder="结束日期">
本月入库总计(件)
1726
自上周以来
20.3%
本月出库总计(件)
1126
自上周以来
29.5%
style=" width: 66px; height: 18px; line-height: 18px; padding-bottom: 23px;border-bottom: 2px solid #5490fd;">
NanJing
import * as echarts from "echarts";
export default {
data() {
return {
tableData: [
{
date: "2016-05",
name: "王小虎",
address: "基地一",
money: "200"
},
{
date: "2016-05",
name: "王小虎",
address: "基地二",
money: "500"
},
{
date: "2016-05",
name: "王小虎",
address: "基地三",
money: "20"
},
{
date: "2016-05",
name: "王小虎",
address: "基地四",
money: "720"
},
{
date: "2016-05",
name: "王小虎",
address: "基地四",
money: "720"
},
],
tableData1: [
{
date: "2016-05",
name: "王小虎",
address: "基地一",
money: "200"
},
{
date: "2016-05",
name: "王小虎",
address: "基地二",
money: "500"
},
{
date: "2016-05",
name: "王小虎",
address: "基地三",
money: "20"
},
{
date: "2016-05",
name: "王小虎",
address: "基地四",
money: "720"
},
{
date: "2016-05",
name: "王小虎",
address: "基地四",
money: "720"
},
],
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
yData: [50, 91, 19, 75, 64, 87, 114], //人数数据
tDate: [23, 124, 115, 112, 117, 208, 175, 290],
taskDate: [113, 154, 165, 172, 167, 188, 135],
myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
};
},
mounted() {
this.getEchartData();
this.getEchartData1();
this.getEchartData2();
this.getEchartData4();
this.getEchartData5();
},
methods: {
getEchartData() {
const chart = this.$refs.chart;
if (chart) {
const myChart = this.$echarts.init(chart);
const option = {
// title: {
// text: "{text1| 销售渠道}{text2| (2023-12-8)}",
// textStyle: {
// rich: {
// text1: {
// color: "#666",
// fontSize: 16,
// },
// text2: {
// color: "#999",
// fontSize: 13,
// },
// },
// },
// },
series: [
{
type: "pie", // type设置为饼图
radius: ["90%", "70%"],
label: {
normal: {
show: true,
position: "center",
color: "#4c4a4a",
formatter:
"{total|" +
78.09 +
"%" +
"}" +
"\n\r" +
"{active|维修类别占比}",
rich: {
total: {
fontSize: 35,
fontFamily: "微软雅黑",
color: "#454c5c",
},
active: {
fontFamily: "微软雅黑",
fontSize: 16,
color: "#6c7a89",
lineHeight: 30,
},
},
},
},
data: [
{
value: 78,
// name: "江苏",
itemStyle: { color: "#0254db" },
},
{
value: 22,
// name: "浙江",
itemStyle: { color: "#3fb6ff" },
},
],
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
this.$on("hook:destroyed", () => {
window.removeEventListener("resize", function () {
myChart.resize();
});
});
},
getEchartData1() {
const chart1 = this.$refs.chart1;
const colors = ["#3fb6ff", "#0254db"];
if (chart1) {
const myChart = this.$echarts.init(chart1);
const option = {
// title: {
// text: "统计数据(万元)",
// },
tooltip: {
trigger: "axis",
},
// legend: {
// data: ["Email", "Union Ads"],
// },
grid: {
left: "3%",
right: "4%",
},
// toolbox: {
// feature: {
// saveAsImage: {},
// },
// },
xAxis: {
type: "category",
boundaryGap: false,
data: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
],
},
yAxis: {
type: "value",
},
series: [
{
name: "应急数量",
type: "line",
stack: "Total",
data: [
120, 532, 101, 634, 190, 280, 710, 520, 332, 101, 234, 190, 330,
],
symbol: 'circle', // 设置标记的图形为circle
itemStyle: {
color: "#3fb6ff"
},
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(58,132,255, 0.5)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(58,132,255, 0)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
lineStyle: {
color: colors[0], // 设置线的颜色为红色
},
},
{
name: "计划维修",
type: "line",
stack: "Total",
data: [
20, 120, 191, 234, 220, 330, 210, 820, 182, 191, 234, 290, 530,
],
symbol: 'circle', // 设置标记的图形为circle
itemStyle: {
color: colors[1],
},
lineStyle: {
color: colors[1], // 设置线的颜色为红色
},
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
this.$on("hook:destroyed", () => {
window.removeEventListener("resize", function () {
myChart.resize();
});
});
},
getEchartData2() {
// 多列柱状图
const mulColumnZZTData = {
xAxis: {
data: this.xData,
},
tooltip: {
trigger: "axis",
},
// 图例
legend: {
data: ["入库量", "出库量", "库存量"],
top: "0%"
},
yAxis: {},
series: [
{
type: "bar", //形状为柱状图
data: this.yData,
name: "入库量", // legend属性
label: {
// 柱状图上方文本标签,默认展示数值信息
show: true,
position: "top",
},
barWidth: "20%",
itemStyle: {
color: "#0052d9",
shadowColor: "#0052d9",
borderType: "dashed",
// opacity: 0.5
},
},
{
type: "bar", //形状为柱状图
data: this.taskDate,
name: "出库量", // legend属性
label: {
// 柱状图上方文本标签,默认展示数值信息
show: true,
position: "top",
},
barWidth: "20%",
itemStyle: {
color: "#0594fa",
shadowColor: "#0594fa",
borderType: "dashed",
// opacity: 0.5
},
},
{
type: "line", //形状为柱状图
data: this.tDate,
name: "库存量", // legend属性
label: {
// 柱状图上方文本标签,默认展示数值信息
show: true,
position: "top",
},
barWidth: "20%",
itemStyle: {
color: "#8dcd77",
shadowColor: "#8dcd77",
borderType: "dashed",
// opacity: 0.5
},
},
],
};
const myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(mulColumnZZTData);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
},
getEchartData4() {
const chart4 = this.$refs.chart4;
const colors = ["#3fb6ff", "#0254db"];
if (chart4) {
const myChart = this.$echarts.init(chart4);
const option = {
legend: {
data: ['维修数量', '维修费用'], //图例名称
left: 35, //调整图例位置
top: 0,
// bottom:20,
//调整图例位置
itemHeight: 7, //修改icon图形大小
icon: 'circle', //图例前面的图标形状
textStyle: { //图例文字的样式
color: '#a1a1a1', //图例文字颜色
fontSize: 12 //图例文字大小
},
},
tooltip: {
trigger: "axis",
},
xAxis: {
type: 'category',
data: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月"
],
},
yAxis: [
{
type: 'value',
name: "维修数量",
min: 1,
max:1500,
axisLabel: {
formatter: function (value, index) {
return (value) + "(件)";
}},
//轴线
axisLine: {
show: true
},
//分割线
splitLine: {
show: false
}
},
{
type: 'value',
name: '维修费用',
min: 1,
max:1500,
axisLabel: {
formatter: function (value, index) {
return (value) + "(万元)";
}},
//轴线
axisLine: {
show: true
},
//分割线
splitLine: {
show: false
}
}
],
// type: 'value',
// min: 1,
// max:1500,
// axisLabel: {
// formatter: function (value, index) {
// return (value) + "(元)";
// }
// }
series: [
{
name: '维修数量',
type: 'line',
smooth: true,
lineStyle: {
color: '#3ec9b4',
width: 2,
type: 'solid',
},
//折线连接点样式
itemStyle: {
color: '#3ec9b4',
},
//折线堆积区域样式
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(172, 240, 241, 0.5)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(219, 238, 252, 0.5)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [120, 632, 101, 334, 290, 130, 320,290],
}, {
name: '维修费用',
type: 'line',
smooth: true,
lineStyle: {
color: '#d256b6',
width: 2,
type: 'solid',
},
//折线连接点样式
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#f2dbfe', // 0% 处的颜色
},
{
offset: 1,
color: "rgba(239, 218, 255,0.5)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
//折线堆积区域样式
areaStyle: {
color: '#efcdff'
},
data: [120, 332, 191, 124, 390, 330, 520, 220,250],
}
]
};
myChart.setOption(option);
let a = document.getElementById.setOption(option);
a.$echarts.div()
window.addEventListener("resize", function () {
myChart.resize();
});
}
this.$on("hook:destroyed", () => {
window.removeEventListener("resize", function () {
myChart.resize();
});
});
},
getEchartData5() {
const chart5 = this.$refs.chart5;
if (chart5) {
const myChart = this.$echarts.init(chart5);
const option = {
series: [
{
type: "pie", // type设置为饼图
radius: ["90%", "89%"],
label: {
normal: {
show: true,
position: "center",
color: "#4c4a4a",
formatter:
"{total|" +
3.02 +
"%" +
"}" +
"\n\r" +
"{active|White Rabbit}",
rich: {
total: {
fontSize: 35,
fontFamily: "微软雅黑",
color: "#454c5c",
},
active: {
fontFamily: "微软雅黑",
fontSize: 16,
color: "#6c7a89",
lineHeight: 30,
},
},
},
},
data: [
{
value: 78,
// name: "江苏",
itemStyle: { color: "#ff6633" },
},
{
value: 22,
// name: "浙江",
itemStyle: { color: "#eee0df" },
},
],
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
this.$on("hook:destroyed", () => {
window.removeEventListener("resize", function () {
myChart.resize();
});
});
},
},
watch: { },
created() { },
};
.d1 {
font-size: 18px;
margin: 25px 25px 40px 25px;
color: #000000;
position: relative;
}
.d2 {
width: 35px;
height: 15px;
font-size: 13px;
color: #888;
position: relative;
position: absolute;
top: 74%;
left: 9%;
}
.d3 {
position: absolute;
top: 5%;
left: 120%;
color: #fe6843;
}
.d4 {
font-size: 18px;
margin: 25px 25px 40px 25px;
color: #000000;
position: relative;
}
.d5 {
width: 35px;
height: 15px;
font-size: 13px;
color: #888;
position: relative;
position: absolute;
top: 74%;
right: 34%;
}
.d6 {
position: absolute;
top: 5%;
left: 170%;
color: #fe6843;
}
.bdiv {
width: 28px;
height: 21px;
font-size: 13px;
color: #888;
border-bottom: 2px solid #0354ca;
position: absolute;
top: 0%;
left: 43%;
}
.ddiv {
width: 28px;
height: 21px;
font-size: 13px;
color: #888;
/* border-bottom: 2px solid #0354ca; */
position: absolute;
top: 0%;
left: 7%;
}
.cdiv {
width: 28px;
height: 21px;
font-size: 13px;
color: #888;
border-bottom: 2px solid #0095ff;
position: absolute;
top: 0%;
left: 55%;
}
.adiv {
width: 86px;
height: 18px;
line-height: 18px;
padding-bottom: 23px;
border-bottom: 2px solid #5490fd;
}
.dev {
width: 100% !important;
height: 200px !important;
}
.el-main {
background-color: #f5f5f5 !important;
}
.el-row {
background-color: #f5f5f5 !important;
}
.col {
background-color: #fff !important;
}
.el-table thead {
background: #fff !important;
}
.scrollable {
height: 200px;
/* 需要设置高度 */
overflow-y: scroll;
/* 或auto */
}
.bnn {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #c9f1da;
position: absolute;
left: 25%;
top: 23%;
}
.by {
position: absolute;
left: 32%;
top: 8%;
}
.rr {
position: absolute;
right: 5%;
top: 33%;
}
.dev {
/* width: 100% !important; */
height: 170px !important;
box-sizing: border-box;
border-radius: 5px;
padding: 15px;
color: #888;
background: #fff;
}
.dev h2 {
font-weight: normal;
margin-bottom: 45px;
color: black;
}
.active {
color: #fff !important;
}
.dev .txt {
display: flex;
justify-content: space-between;
align-items: center;
}
.dev .txt .top {
display: flex;
align-items: center;
}
.dev .top .circle {
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0 5px;
text-align: center;
background: #5490fd;
color: #fff;
}
.change {
background: #c7f3e2 !important;
color: #479578 !important;
}
.header {
height: 100%;
}
.header .box {
height: 190px;
display: flex;
justify-content: center;
align-items: center;
}
.header .box .right {
display: flex;
flex-direction: column;
/* justify-content: start; */
align-items: start;
color: #888;
}
.header .right .center {
display: flex;
}
.header .right .center .bold {
margin: 0;
color: black;
font-weight: normal;
font-size: 36px;
}