188 lines
5.6 KiB
JavaScript
188 lines
5.6 KiB
JavaScript
|
// pages/components/curve-echarts/index.js
|
||
|
|
import * as echarts from '../../../ec-canvas/echarts'
|
||
|
|
Component({
|
||
|
|
/**
|
||
|
|
* 组件的属性列表
|
||
|
|
*/
|
||
|
|
properties: {
|
||
|
|
chartId:{
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
chartData:{
|
||
|
|
type: Object
|
||
|
|
},
|
||
|
|
height:{
|
||
|
|
type:String
|
||
|
|
}
|
||
|
|
},
|
||
|
|
observers: {
|
||
|
|
chartData: function (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.setOption(this.getData());
|
||
|
|
return chart;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getData() {
|
||
|
|
let that=this
|
||
|
|
var data = this.data.chartData
|
||
|
|
var legend={}
|
||
|
|
var xAxis={}
|
||
|
|
var series=[]
|
||
|
|
if(data.lineData != undefined) {
|
||
|
|
for(let i=0;i<data.lineData.length;i++) {
|
||
|
|
series.push({
|
||
|
|
name: data.legend[i] ,
|
||
|
|
type: 'line',
|
||
|
|
smooth: true ,// 将折线图变为波浪线图展示
|
||
|
|
symbol: "circle",
|
||
|
|
symbolSize: 5,
|
||
|
|
showSymbol: false,
|
||
|
|
lineStyle: {
|
||
|
|
normal: {
|
||
|
|
width: 2,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: data.color[i],
|
||
|
|
borderWidth: 5,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: data.lineData[i]
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var unit = ''
|
||
|
|
if(data.unit){
|
||
|
|
unit = '单位：'+data.unit
|
||
|
|
}
|
||
|
|
var option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
lineStyle: {
|
||
|
|
color: "#ccc",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
// type: 'plain', // 设置为plain
|
||
|
|
icon:'rect',
|
||
|
|
itemWidth: 10,
|
||
|
|
itemHeight: 10,
|
||
|
|
itemGap: 6,
|
||
|
|
data: data.legend,
|
||
|
|
top: -5,
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 10,
|
||
|
|
color: "#6d82bd",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
// top: '10%', // 可以设置为百分比或像素值
|
||
|
|
bottom: '40%',
|
||
|
|
left: '18%',
|
||
|
|
// right: '10%'
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: data.date,
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
//坐标轴轴线相关设置。数学上的x轴
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: "#23283e",
|
||
|
|
type: "dashed",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#6d82bd',
|
||
|
|
rotate: 60, // 旋转角度
|
||
|
|
margin: 5 // 偏移量
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
name: unit, // 设置y轴的单位
|
||
|
|
type: "value",
|
||
|
|
axisLine: {
|
||
|
|
//坐标轴轴线相关设置。数学上的x轴
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: "#23283e",
|
||
|
|
type: "dashed",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#008ffd', // y轴文字颜色为蓝色
|
||
|
|
},
|
||
|
|
nameTextStyle: {
|
||
|
|
fontSize: 10, // 设置单位文字的大小
|
||
|
|
fontWeight: 'bold', // 设置单位文字的粗细
|
||
|
|
color:'#fff'
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: "#3d414e",
|
||
|
|
type: "solid",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
},
|
||
|
|
series,
|
||
|
|
};
|
||
|
|
return option;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|