207 lines
6.0 KiB
JavaScript
207 lines
6.0 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)',
|
||
// legend:['X轴', 'Y轴'],
|
||
// color:['#2e6ed0','#fb9300'],
|
||
// Xdata :['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30'],
|
||
// Ydata:[[2,1,0,0,0,0,0],[-10,10,5,-5,-3,-1,10]]
|
||
// }
|
||
|
||
var unit=''
|
||
if(data.unit){
|
||
unit='单位：'+data.unit
|
||
}
|
||
|
||
var series = []
|
||
for(var i = 0;i<data.Ydata.length ;i++){
|
||
series.push({
|
||
name: data.legend[i],
|
||
type: 'line',
|
||
//smooth: true,
|
||
symbol: 'roundRect',
|
||
symbolSize:5,
|
||
//showSymbol: false,
|
||
lineStyle: {
|
||
normal: {
|
||
color: data.color[i],
|
||
width:1,
|
||
type: 'dashed',
|
||
},
|
||
|
||
},
|
||
data: data.Ydata[i]
|
||
})
|
||
}
|
||
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: '#57617B'
|
||
}
|
||
},
|
||
formatter: function (params) {
|
||
var dom = params[0].axisValue+'\n'+params[0].seriesName+'：'+params[0].data+' '+data.unit+'\n'+params[1].seriesName+'：'+params[1].data+' '+data.unit
|
||
return dom
|
||
}
|
||
|
||
// formatter: function (params) {
|
||
// var dom = '<div style="padding:3px 5px;">' +
|
||
// '<div>'+params[0].axisValue+'</div>'+
|
||
// '<div>'+params[0].seriesName+'：'+params[0].data+'° </div>'+
|
||
// '<div>'+params[1].seriesName+'：'+params[1].data+'° </div>'+
|
||
// '</div>'
|
||
// return dom
|
||
// }
|
||
|
||
},
|
||
color:['#2e6ed0','#fb9300'],
|
||
legend: {
|
||
icon: 'rect',
|
||
itemWidth: 10,
|
||
itemHeight: 8,
|
||
itemGap: 10,
|
||
data: data.legend,
|
||
right: '4%',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: '#8ba3eb'
|
||
},
|
||
|
||
},
|
||
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:series
|
||
};
|
||
|
||
return option;
|
||
}
|
||
}
|
||
})
|