257 lines
6.3 KiB
Vue
257 lines
6.3 KiB
Vue
<template>
|
|
<div id="operationEchart" ></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "echarsDemo",
|
|
props: {
|
|
ydata: {
|
|
default: () => false,
|
|
type: [Array, Boolean],
|
|
required: true
|
|
},
|
|
xdata: {
|
|
default: () => false,
|
|
type: [Array, Boolean],
|
|
required: true
|
|
},
|
|
},
|
|
data(){
|
|
return{
|
|
|
|
};
|
|
},
|
|
watch:{
|
|
ydata:{
|
|
handler:function(newV){
|
|
console.log("newV",newV)
|
|
this.getLoadEcharts()
|
|
}
|
|
},
|
|
xdata:{
|
|
handler:function(newV1){
|
|
console.log("newV1",newV1)
|
|
this.getLoadEcharts()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getLoadEcharts()
|
|
console.log("111",this.xdata);
|
|
console.log("222",this.ydata);
|
|
},
|
|
methods:{
|
|
getLoadEcharts(){
|
|
var myChart = this.$echarts.init(
|
|
document.getElementById("operationEchart")
|
|
);
|
|
// let value = [5, 7, 8, 9, 10, 11, 13, 15, 16, 14, 13, 12, 8, 6, 5, 4, 5, 6, 7, 8, 10, 11, 10, 8,12,13,9,6];
|
|
let value = this.ydata
|
|
let min = Math.min(...value); //计算最小值
|
|
let max = Math.max(...value); //计算最大值
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
color:['#52F478'],
|
|
icon: "circle",
|
|
// legend: {
|
|
// x:'580px',
|
|
// y: '30px',
|
|
// data: [{
|
|
// name: '月',
|
|
// icon:'none'
|
|
// },
|
|
// {
|
|
// name: '日',
|
|
// icon:'none'
|
|
// }],
|
|
// textStyle:{
|
|
// fontSize: 14,//字体大小
|
|
// color: '#BBF6FF',//字体颜色
|
|
|
|
// },
|
|
// selectedMode: 'single',
|
|
// },
|
|
grid: {
|
|
left: '5px',
|
|
right: '5px',
|
|
bottom: '5px',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
name:'',
|
|
nameGap:'16',
|
|
show:true,
|
|
boundaryGap:false,
|
|
axisLabel:{
|
|
textStyle:{
|
|
color:'#FFFFFF'
|
|
}
|
|
},
|
|
axisTick:{
|
|
show:false
|
|
},
|
|
splitArea : {
|
|
show : false,
|
|
},
|
|
splitLine : {
|
|
show :false,
|
|
},
|
|
axisLine: {
|
|
show:false,
|
|
lineStyle:{
|
|
color:'#BBF6FF',
|
|
width:2,
|
|
},
|
|
symbol:['none','arrow']
|
|
},
|
|
// data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
|
|
data:this.xdata
|
|
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name:'单位: 次',
|
|
show: true,
|
|
nameTextStyle: {
|
|
color:'#ffffff'
|
|
},
|
|
axisLabel:{
|
|
textStyle:{
|
|
color:'#ffffff'
|
|
}
|
|
},
|
|
axisTick:{ //y轴刻度线
|
|
show:true
|
|
},
|
|
splitArea : {
|
|
show : false,
|
|
},
|
|
splitLine : {
|
|
show: true,
|
|
lineStyle:{
|
|
color: 'rgb(8,99,116)',
|
|
width:1,
|
|
},
|
|
},
|
|
axisLine: {
|
|
show:false,
|
|
lineStyle:{
|
|
color:'rgb(8,99,116)',
|
|
width:1,
|
|
},
|
|
symbol:['none','arrow']
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
// name:'月',
|
|
name:'故障次数',
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle:{
|
|
normal:{
|
|
color:'#4EEE79',
|
|
width:3
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
offset: 0,
|
|
color: 'rgb(9,84,88)'
|
|
}, {
|
|
offset: 1,
|
|
color: 'rgb(9,71,72)'
|
|
}]),
|
|
},
|
|
},
|
|
// data: [5, 7, 8, 9, 10, 11, 13, 15, 16, 14, 13, 12, 8, 6, 5, 4, 5, 6, 7, 8, 10, 11, 10, 8, 12, 13, 9, 6],
|
|
data:this.ydata,
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: '最大值'},
|
|
]
|
|
|
|
},
|
|
symbol: function (value, params) {
|
|
if (value == min || value == max) {
|
|
return 'circle'; //拐点类型
|
|
} else {
|
|
return 'none'; //拐点不显示
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#52F478',
|
|
borderColor: '#ffffff', //拐点边框颜色
|
|
lineStyle: {
|
|
color: '#52F478', //折线颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
// {
|
|
// name:'日',
|
|
// type:'line',
|
|
// smooth: true,
|
|
// lineStyle:{
|
|
// normal:{
|
|
// color:'#FFCD8B',
|
|
// width:3
|
|
// }
|
|
// },
|
|
// areaStyle: {
|
|
// normal: {
|
|
// color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
// offset: 0,
|
|
// color: 'rgb(9,84,88)'
|
|
// }, {
|
|
// offset: 1,
|
|
// color: 'rgb(9,71,72)'
|
|
// }]),
|
|
// },
|
|
// },
|
|
// data:this.ydata,
|
|
// markPoint: {
|
|
// data: [
|
|
// {type: 'max', name: '最大值'},
|
|
// ]
|
|
|
|
// },
|
|
// symbol: function (value, params) {
|
|
// if (value == min || value == max) {
|
|
// return 'circle'; //拐点类型
|
|
// } else {
|
|
// return 'none'; //拐点不显示
|
|
// }
|
|
// },
|
|
// itemStyle: {
|
|
// normal: {
|
|
// color: '#FFCD8B',
|
|
// borderColor: '#ffffff', //拐点边框颜色
|
|
// lineStyle: {
|
|
// color: '#FFCD8B', //折线颜色
|
|
// },
|
|
// },
|
|
// },
|
|
// }
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
#operationEchart{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|