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