149 lines
4.3 KiB
JavaScript
149 lines
4.3 KiB
JavaScript
// pages/components/curve-echarts/index.js
|
|
import * as echarts from '../../../ec-canvas/echarts'
|
|
Component({
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {
|
|
chartId:{
|
|
type: String
|
|
},
|
|
chartData:{
|
|
type: Array
|
|
},
|
|
height:{
|
|
type:String
|
|
},
|
|
title:{
|
|
type:String
|
|
},
|
|
color:{
|
|
type:Array
|
|
}
|
|
},
|
|
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.setOption(this.getData());
|
|
return chart;
|
|
})
|
|
},
|
|
getData() {
|
|
let that=this
|
|
var data = this.data.chartData
|
|
var legend={}
|
|
var xAxis={}
|
|
var series=[]
|
|
console.log(data);
|
|
for(let i=0;i<data.length;i++){
|
|
console.log(data[i].name);
|
|
console.log(data[i].biaoyangX);
|
|
console.log(data[i].biaoyangY);
|
|
series.push({
|
|
name: data[i].name ,
|
|
type: 'line',
|
|
smooth: true ,// 将折线图变为波浪线图展示
|
|
data: data[i].biaoyangY,
|
|
})
|
|
}
|
|
var option = {
|
|
// title: {
|
|
// text: '城市天气温度',
|
|
// },
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
//color:this.data.color,
|
|
legend: {
|
|
// type: 'plain', // 设置为plain
|
|
icon:'roundRect',
|
|
itemWidth: 10,
|
|
itemHeight: 10,
|
|
orient: 'horizontal', // 设置为水平展示
|
|
// x: 'center', // 设置水平方向的位置
|
|
data: data.map(item=>item.name),
|
|
textStyle: {
|
|
fontSize: 10, // 设置字体大小为16px
|
|
color:'#fff'
|
|
}
|
|
},
|
|
grid: {
|
|
// top: '10%', // 可以设置为百分比或像素值
|
|
bottom: '30%',
|
|
left: '15%',
|
|
// right: '10%'
|
|
},
|
|
xAxis:{
|
|
// type: 'category',
|
|
data: data[0].biaoyangX,
|
|
axisLabel: {
|
|
color: '#fff', // y轴文字颜色为白色
|
|
rotate: 60, // 旋转角度
|
|
margin: 10, // 偏移量
|
|
fontSize: 10
|
|
}
|
|
},
|
|
yAxis: {
|
|
name: this.data.title, // 设置y轴的单位
|
|
nameTextStyle: {
|
|
fontSize: 10, // 设置单位文字的大小
|
|
fontWeight: 'bold', // 设置单位文字的粗细
|
|
color:'#fff'
|
|
},
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#fff' // y轴文字颜色为白色
|
|
}
|
|
},
|
|
series,
|
|
};
|
|
return option;
|
|
}
|
|
}
|
|
})
|