253 lines
7.7 KiB
JavaScript
253 lines
7.7 KiB
JavaScript
// components/bar-chart/index.js
|
||
import * as echarts from '../../../ec-canvas/echarts'
|
||
|
||
Component({
|
||
/**
|
||
* 组件的属性列表
|
||
*/
|
||
properties: {
|
||
chartId:{
|
||
type: String
|
||
},
|
||
chartData:{
|
||
type: Object
|
||
}
|
||
},
|
||
observers: {
|
||
chartData: function (val) {
|
||
//console.log(val)
|
||
//this.initChart()
|
||
},
|
||
},
|
||
/**
|
||
* 组件的初始数据
|
||
*/
|
||
data: {
|
||
ec: {
|
||
lazyLoad: true
|
||
},
|
||
chart:undefined,
|
||
},
|
||
lifetimes: {
|
||
created: function(){
|
||
//在组件实例刚刚被创建时执行，注意此时不能调用 setData
|
||
},
|
||
attached: function () {
|
||
//在组件实例进入页面节点树时执行
|
||
|
||
},
|
||
ready: function () {
|
||
// 在组件在视图层布局完成后执行
|
||
|
||
this.initChart();
|
||
},
|
||
detached: function () {
|
||
// 在组件实例被从页面节点树移除时执行
|
||
},
|
||
|
||
},
|
||
/**
|
||
* 组件的方法列表
|
||
*/
|
||
methods: {
|
||
initChart(){
|
||
var id ='#' + this.data.chartId;
|
||
this.component = this.selectComponent(id);
|
||
this.component.init((canvas, width, height, dpr) => {
|
||
let chart = echarts.init(canvas, null, {
|
||
width: width,
|
||
height: height,
|
||
devicePixelRatio: dpr
|
||
})
|
||
chart.clear();
|
||
chart.setOption(this.getData());
|
||
return chart;
|
||
})
|
||
},
|
||
getData() {
|
||
var data = this.data.chartData
|
||
|
||
// var data ={
|
||
// unit : '变化量(mm)',
|
||
// Xdata:['2022-12-2', '2022-12-3', '2022-12-4', '2022-12-5', '2022-12-6', '2022-12-7', '2022-12-8'],
|
||
// Ydata:[2,0,0,0,0,0,0],
|
||
// warningMax :[10,10,10,10,10,10,10],
|
||
// warningMin :[-10,-10,-10,-10,-10,-10,-10],
|
||
// policeMax : [20,20,20,20,20,20,20],
|
||
// policeMin : [-20,-20,-20,-20,-20,-20,-20],
|
||
// }
|
||
|
||
var unit=''
|
||
if(data.unit){
|
||
unit='单位：'+data.unit
|
||
}
|
||
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: '#57617B'
|
||
}
|
||
},
|
||
formatter: function (params) {
|
||
var dom = params[0].axisValue+'\n'+ params[4].seriesName+'：'+params[4].data+' '+data.unit+'\n'+params[2].seriesName+'：'+params[2].data+' '+data.unit+'/'+params[3].data+' '+data.unit+'\n'+params[0].seriesName+'：'+params[0].data+' '+data.unit+'/'+params[1].data+' '+data.unit
|
||
return dom
|
||
}
|
||
// formatter: function (params) {
|
||
// var dom = '<div style="padding:3px 5px;">' +
|
||
// '<div>'+params[0].axisValue+'</div>'+
|
||
// '<div>'+params[4].seriesName+'：'+params[4].data+'° </div>'+
|
||
// '<div>'+params[2].seriesName+'：'+params[2].data+'/'+params[3].data+'° </div>'+
|
||
// '<div>'+params[0].seriesName+'：'+params[0].data+'/'+params[1].data+'° </div>'+
|
||
// '</div>'
|
||
// return dom
|
||
// }
|
||
},
|
||
color:['#ff0000','#fb9300','#2e6ed0'],
|
||
|
||
grid: {
|
||
top:'15%',
|
||
left: '3%',
|
||
right: '5%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#252b41',
|
||
type: 'dashed',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontSize: 10,
|
||
color:'#879be2 '
|
||
},
|
||
rotate:40,
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
data: data.Xdata
|
||
}],
|
||
yAxis: [{
|
||
name: unit,
|
||
nameTextStyle: { //Y轴那么的样式
|
||
color: '#89a4eb',
|
||
fontSize: 10,
|
||
},
|
||
type: 'value',
|
||
// max:30,
|
||
// min:-30,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#252b41'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontSize: 10,
|
||
color:'#008fe8'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#252b41',
|
||
type: 'dashed',
|
||
}
|
||
}
|
||
}],
|
||
series: [{
|
||
name: '报警',
|
||
type: 'line',
|
||
//smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 0,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#ff0000',
|
||
width:1,
|
||
type: 'dashed',
|
||
}
|
||
},
|
||
data: data.policeMax
|
||
}, {
|
||
name: '报警',
|
||
type: 'line',
|
||
// smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 0,
|
||
showSymbol: false,
|
||
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#ff0000',
|
||
width:1,
|
||
type: 'dashed',
|
||
}
|
||
},
|
||
|
||
data: data.policeMin
|
||
},{
|
||
name: '预警',
|
||
type: 'line',
|
||
// smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 0,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#fb9300',
|
||
width:1,
|
||
type: 'dashed',
|
||
}
|
||
},
|
||
data: data.warningMax
|
||
},{
|
||
name: '预警',
|
||
type: 'line',
|
||
// smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 0,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#fb9300',
|
||
width:1,
|
||
type: 'dashed',
|
||
}
|
||
},
|
||
data: data.warningMin
|
||
}, {
|
||
name: '测量',
|
||
type: 'line',
|
||
//smooth: true,
|
||
symbol: 'roundRect',
|
||
symbolSize:5,
|
||
//showSymbol: false,
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#2e6ed0',
|
||
width:1,
|
||
},
|
||
|
||
},
|
||
data: data.Ydata
|
||
}
|
||
]
|
||
};
|
||
|
||
return option;
|
||
}
|
||
}
|
||
})
|