parent
2eb9cb1dc9
commit
35ece7e45e
4 changed files with 534 additions and 0 deletions
@ -0,0 +1,110 @@ |
|||||||
|
<template> |
||||||
|
|
||||||
|
<!-- eacharts 图表 --> |
||||||
|
<div class="bar_charts" id="bar_echart"></div> |
||||||
|
|
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
echartData: { |
||||||
|
type: Array, |
||||||
|
default: {} |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
watch: { |
||||||
|
echartData(val) { |
||||||
|
this.pieInfo = val |
||||||
|
this.$nextTick(() => { |
||||||
|
this.maintenanceInit() |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: { |
||||||
|
searchTime: "", |
||||||
|
startTime: "", |
||||||
|
endTime: "", |
||||||
|
}, |
||||||
|
calendarShow: false, |
||||||
|
mode: "range", |
||||||
|
upkeepStatInfo: {}, |
||||||
|
pieInfo: [],//饼图数据 |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 维修统计柱状图 |
||||||
|
maintenanceInit() { |
||||||
|
var myChart = this.$echarts.init(document.getElementById('bar_echart')); |
||||||
|
let opts = { |
||||||
|
tooltip: {}, |
||||||
|
legend: { |
||||||
|
//图例组件 |
||||||
|
data: ["总计", "已完成", "未完成"], |
||||||
|
itemWidth: 15, |
||||||
|
itemHeight: 10, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
data: this.echartData.xData, |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
top: "25%", |
||||||
|
left: "10%", |
||||||
|
right: "5%", |
||||||
|
bottom: "15%", |
||||||
|
}, |
||||||
|
yAxis: {}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "总计", |
||||||
|
type: "bar", |
||||||
|
data: this.echartData.total, |
||||||
|
barWidth: 25, // 设置柱子宽度 |
||||||
|
barGap: "0", // 设置不同系列之间的间隔为0 |
||||||
|
itemStyle: { |
||||||
|
color: "#2478f2", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "已完成", |
||||||
|
type: "bar", |
||||||
|
data: this.echartData.completed, |
||||||
|
barWidth: 25, // 设置柱子宽度 |
||||||
|
barGap: "0", // 设置不同系列之间的间隔为0 |
||||||
|
itemStyle: { |
||||||
|
color: "#84b7f9", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "未完成", |
||||||
|
type: "bar", |
||||||
|
data: this.echartData.unCompleted, |
||||||
|
barWidth: 25, // 设置柱子宽度 |
||||||
|
barGap: "0", // 设置不同系列之间的间隔为0 |
||||||
|
itemStyle: { |
||||||
|
color: "#5f9cf8", |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//4.使用刚指定的配置项和数据显示图表。 |
||||||
|
myChart.setOption(opts); |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.bar_charts { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,108 @@ |
|||||||
|
<template> |
||||||
|
<!-- 饼状图 --> |
||||||
|
<div class="probability_box" id="device_echarts"></div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
// import * as echarts from "echarts"; |
||||||
|
// import lEchart from "@/uni_modules/lime-echart/components/lime-echart/"; |
||||||
|
import { nextTick } from 'vue'; |
||||||
|
export default { |
||||||
|
// components: { lEchart }, |
||||||
|
props: { |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
echartData: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
echartData(val) { |
||||||
|
this.pieInfo = val |
||||||
|
|
||||||
|
this.$nextTick(() => { |
||||||
|
this.maintenancePieInit() |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: { |
||||||
|
searchTime: "", |
||||||
|
startTime: "", |
||||||
|
endTime: "", |
||||||
|
}, |
||||||
|
pieInfo: [],//饼图数据 |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
console.log(111111111, this.echartData) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 故障现象分类 |
||||||
|
maintenancePieInit() { |
||||||
|
var myChart = this.$echarts.init(document.getElementById('device_echarts')); |
||||||
|
let opts = { |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
transitionDuration: 0,//防止页面抖动 |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "", |
||||||
|
type: "pie", |
||||||
|
center: ['50%', '50%'], |
||||||
|
roseType: 'area', |
||||||
|
label: { |
||||||
|
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等. |
||||||
|
normal: { |
||||||
|
show: true, |
||||||
|
fontSize: 8, // 是否显示标签[ default: false ] |
||||||
|
position: "outside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。 |
||||||
|
formatter: "{b}\n {c}", // 标签内容 |
||||||
|
color: '#000' |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
data: this.pieInfo, |
||||||
|
emphasis: { |
||||||
|
itemStyle: { |
||||||
|
shadowBlur: 10, |
||||||
|
shadowOffsetX: 0, |
||||||
|
shadowColor: "rgba(0, 0, 0, 1)", |
||||||
|
}, |
||||||
|
}, |
||||||
|
labelLine: { |
||||||
|
// 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。 |
||||||
|
normal: { |
||||||
|
show: true, // 是否显示视觉引导线。 |
||||||
|
length: 5, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。 |
||||||
|
length2: 5, |
||||||
|
|
||||||
|
// 视觉引导项第二段的长度。 |
||||||
|
lineStyle: { |
||||||
|
// 视觉引导线的样式 |
||||||
|
type: "solid", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//4.使用刚指定的配置项和数据显示图表。 |
||||||
|
myChart.setOption(opts); |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.probability_box { |
||||||
|
width: 100%; |
||||||
|
height: 100% |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
<template> |
||||||
|
<!-- 饼状图 --> |
||||||
|
<div class="probability_box" id="error_echarts"></div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
// import * as echarts from "echarts"; |
||||||
|
// import lEchart from "@/uni_modules/lime-echart/components/lime-echart/"; |
||||||
|
import { nextTick } from 'vue'; |
||||||
|
export default { |
||||||
|
// components: { lEchart }, |
||||||
|
props: { |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
echartData: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
echartData(val) { |
||||||
|
this.pieInfo = val |
||||||
|
this.$nextTick(() => { |
||||||
|
this.maintenancePieInit() |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: { |
||||||
|
searchTime: "", |
||||||
|
startTime: "", |
||||||
|
endTime: "", |
||||||
|
}, |
||||||
|
pieInfo: [],//饼图数据 |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 故障现象分类 |
||||||
|
maintenancePieInit() { |
||||||
|
|
||||||
|
var myChart = this.$echarts.init(document.getElementById('error_echarts')); |
||||||
|
let opts = { |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
transitionDuration: 0,//防止页面抖动 |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "", |
||||||
|
type: "pie", |
||||||
|
radius: ['40%', '70%'], |
||||||
|
label: { |
||||||
|
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等. |
||||||
|
normal: { |
||||||
|
show: true, |
||||||
|
fontSize: 8, // 是否显示标签[ default: false ] |
||||||
|
position: "outside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。 |
||||||
|
formatter: "{b}\n {c}", // 标签内容 |
||||||
|
color: '#000' |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
data: this.pieInfo, |
||||||
|
emphasis: { |
||||||
|
itemStyle: { |
||||||
|
shadowBlur: 10, |
||||||
|
shadowOffsetX: 0, |
||||||
|
shadowColor: "rgba(0, 0, 0, 1)", |
||||||
|
}, |
||||||
|
}, |
||||||
|
labelLine: { |
||||||
|
// 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。 |
||||||
|
normal: { |
||||||
|
show: true, // 是否显示视觉引导线。 |
||||||
|
length: 5, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。 |
||||||
|
length2: 5, |
||||||
|
|
||||||
|
// 视觉引导项第二段的长度。 |
||||||
|
lineStyle: { |
||||||
|
// 视觉引导线的样式 |
||||||
|
type: "solid", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//4.使用刚指定的配置项和数据显示图表。 |
||||||
|
myChart.setOption(opts); |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.probability_box { |
||||||
|
width: 100%; |
||||||
|
height: 100% |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,210 @@ |
|||||||
|
<template> |
||||||
|
|
||||||
|
<!-- eacharts 图表 --> |
||||||
|
<div class="bar_charts" id="bar_echart"></div> |
||||||
|
|
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
echartData: { |
||||||
|
type: Array, |
||||||
|
default: {} |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
watch: { |
||||||
|
echartData(val) { |
||||||
|
this.pieInfo = val |
||||||
|
this.$nextTick(() => { |
||||||
|
this.maintenanceInit() |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: { |
||||||
|
searchTime: "", |
||||||
|
startTime: "", |
||||||
|
endTime: "", |
||||||
|
}, |
||||||
|
calendarShow: false, |
||||||
|
mode: "range", |
||||||
|
upkeepStatInfo: {}, |
||||||
|
pieInfo: [],//饼图数据 |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 维修统计柱状图 |
||||||
|
maintenanceInit() { |
||||||
|
let data = [{ |
||||||
|
name: '姓名1', |
||||||
|
value: (Math.random() * 10).toFixed(0), |
||||||
|
sum: 10 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '姓名1', |
||||||
|
value: (Math.random() * 10).toFixed(0), |
||||||
|
sum: 10 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '姓名1', |
||||||
|
value: (Math.random() * 10).toFixed(0), |
||||||
|
sum: 10 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '姓名1', |
||||||
|
value: (Math.random() * 10).toFixed(0), |
||||||
|
sum: 10 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '姓名1', |
||||||
|
value: (Math.random() * 10).toFixed(0), |
||||||
|
sum: 10 |
||||||
|
}, |
||||||
|
|
||||||
|
]; |
||||||
|
let opt = { |
||||||
|
index: 0 |
||||||
|
} |
||||||
|
let color = ['#FC619D', '#FF904D', '#48BFE3']; |
||||||
|
let getArrByKey = (data, k) => { |
||||||
|
let key = k || "value"; |
||||||
|
let res = []; |
||||||
|
if (data) { |
||||||
|
data.forEach(function (t) { |
||||||
|
res.push(t[key]); |
||||||
|
}); |
||||||
|
} |
||||||
|
return res; |
||||||
|
}; |
||||||
|
var myChart = this.$echarts.init(document.getElementById('bar_echart')); |
||||||
|
let opts = { |
||||||
|
grid: { |
||||||
|
top: '2%', |
||||||
|
bottom: -15, |
||||||
|
right: 30, |
||||||
|
left: -30, |
||||||
|
containLabel: true |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
yAxis: [{ |
||||||
|
triggerEvent: true, |
||||||
|
show: true, |
||||||
|
inverse: true, |
||||||
|
data: getArrByKey(data, 'name'), |
||||||
|
axisLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
interval: 0, |
||||||
|
color: '#666', |
||||||
|
align: 'left', |
||||||
|
margin: 80, |
||||||
|
fontSize: 13, |
||||||
|
formatter: function (value, index) { |
||||||
|
if (opt.index === 0 && index < 3) { |
||||||
|
return '{idx' + index + '|' + (1 + index) + '} {title|' + value + '}' |
||||||
|
} else if (opt.index !== 0 && (index + opt.index) < 9) { |
||||||
|
return '{idx|0' + (1 + index + opt.index) + '} {title|' + value + '}' |
||||||
|
} else { |
||||||
|
return '{idx|' + (1 + index + opt.index) + '} {title|' + value + '}' |
||||||
|
} |
||||||
|
}, |
||||||
|
rich: { |
||||||
|
idx0: { |
||||||
|
color: '#FB375E', |
||||||
|
backgroundColor: '#FFE8EC', |
||||||
|
borderRadius: 100, |
||||||
|
padding: [5, 8] |
||||||
|
}, |
||||||
|
idx1: { |
||||||
|
color: '#FF9023', |
||||||
|
backgroundColor: '#FFEACF', |
||||||
|
borderRadius: 100, |
||||||
|
padding: [5, 8] |
||||||
|
}, |
||||||
|
idx2: { |
||||||
|
color: '#01B599', |
||||||
|
backgroundColor: '#E1F7F3', |
||||||
|
borderRadius: 100, |
||||||
|
padding: [5, 8] |
||||||
|
}, |
||||||
|
idx: { |
||||||
|
color: '#333', |
||||||
|
borderRadius: 100, |
||||||
|
padding: [5, 8] |
||||||
|
}, |
||||||
|
title: { |
||||||
|
width: 165 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
}, { |
||||||
|
triggerEvent: true, |
||||||
|
show: false, |
||||||
|
inverse: true, |
||||||
|
data: getArrByKey(data, 'name'), |
||||||
|
axisLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
interval: 0, |
||||||
|
color: '#666', |
||||||
|
align: 'left', |
||||||
|
margin: 20, |
||||||
|
fontSize: 13, |
||||||
|
|
||||||
|
} |
||||||
|
}], |
||||||
|
series: [{ |
||||||
|
name: '条', |
||||||
|
type: 'bar', |
||||||
|
yAxisIndex: 0, |
||||||
|
data: data, |
||||||
|
barWidth: 10, |
||||||
|
itemStyle: { |
||||||
|
color: (val) => { |
||||||
|
if (val.dataIndex < 3 && opt.index === 0) { |
||||||
|
return color[val.dataIndex]; |
||||||
|
} else { |
||||||
|
return '#1990FF' |
||||||
|
} |
||||||
|
}, |
||||||
|
barBorderRadius: 30, |
||||||
|
} |
||||||
|
}] |
||||||
|
}; |
||||||
|
//4.使用刚指定的配置项和数据显示图表。 |
||||||
|
myChart.setOption(opts); |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.bar_charts { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue