Commit d50c9bd0 authored by ww-xxy's avatar ww-xxy

增加目标线

parent e8a3e019
......@@ -26,6 +26,14 @@ export default {
parameter: {
type: Object,
default: () => { }
},
markLine: {
type: Number,
default: () => 0
},
option: {
type: Object,
default: () => { }
}
},
data() {
......@@ -35,7 +43,7 @@ export default {
},
watch: {
title(val) {
this.myChart && this.myChart.setOption({title:{text:val}})
this.myChart && this.myChart.setOption({ title: { text: val } })
},
parameter: {
handler: function (v) {
......@@ -58,22 +66,48 @@ export default {
},
series: [
{
data: obj.y,
name: this.legendName,
data: obj.y
},
]
})
if (this.markLine) {
this.myChart.setOption({
series: [
{
markLine: {
data: [{
name: '目标线',
yAxis: this.markLine,
label: {
formatter: '{b}:'+this.legendName+'不高于20.0%,',
position: 'insideStartTop'
},
lineStyle: {
color: "red",
}
}],
label: {
color: "red",
distance: [20, 8]
}
}
},
]
})
}
return
}
// 基于dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById(this.id));
this.myChart = myChart
// 绘制图表
myChart.setOption({
const option = {
title: {
text: this.title,
left: this.legendName == "旷工率" ? "center" : "left",
left: "left",
textStyle: {
fontSize: this.legendName == "旷工率" ? 24 : 18,
fontSize: 18,
},
},
color: '#6e98ed',
......@@ -89,6 +123,20 @@ export default {
color: "#000",
},
},
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 100
},
{
type: 'inside',
realtime: true,
start: 0,
end: 100
}
],
tooltip: {},
xAxis: {
data: [],
......@@ -96,7 +144,7 @@ export default {
grid: {
left: "5%",
right: "4%",
bottom: "2%",
bottom: 40,
containLabel: true,
},
// color:[ "#61a0a8",],
......@@ -107,14 +155,39 @@ export default {
type: "bar",
data: [],
itemStyle: {
lineStyle: {
type: "dotted", //'dotted'虚线 'solid'实线
},
},
},
],
});
}
myChart.setOption(Object.assign({}, option, this.option));
if (this.markLine) {
myChart.setOption({
series: [
{
markLine: {
data: [{
name: '目标线',
yAxis: this.markLine,
label: {
formatter: '{b}:旷工率不高于20.0%,',
position: 'insideStartTop'
},
lineStyle: {
color: "red",
}
}],
label: {
color: "red",
distance: [20, 8]
}
}
},
]
})
}
},
},
};
......
......@@ -21,11 +21,11 @@ export default {
},
styleObj: {
type: Object,
default: () => {},
default: () => { },
},
parameter: {
type: Object,
default: () => {}
default: () => { }
}
},
data() {
......@@ -35,7 +35,7 @@ export default {
},
watch: {
title(val) {
this.myChart && this.myChart.setOption({title:{text:val}})
this.myChart && this.myChart.setOption({ title: { text: val } })
},
parameter: {
handler: function (v) {
......@@ -83,7 +83,7 @@ export default {
},
},
tooltip: {},
color:'#6e98ed',
color: '#6e98ed',
xAxis: {
type: "category",
data: [],
......@@ -91,9 +91,23 @@ export default {
grid: {
left: "3%",
right: "4%",
bottom: "2%",
bottom: 40,
containLabel: true,
},
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 100
},
{
type: 'inside',
realtime: true,
start: 0,
end: 100
}
],
yAxis: {},
series: [
{
......
......@@ -125,7 +125,9 @@
<bar-charts
:title="`${type1 == 1 ? '各部门' : '个人'}${StatQuery.month}月${alignmentName}对齐情况`"
:id="'bar_content'"
:legendName="'旷工率'"
:legendName="alignmentName"
:option="{title:{left:'center',textStyle:{fontSize:24}}}"
:markLine="0.2"
:parameter="depStatObj.alignment"
:styleObj="{ width: '1800px', height: '650px' }"
/>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment