秋云ucharts echarts 高性能夸全段图表下的qiun-data-charts链接后台数据

前言

最近新弄了一个秋云ucharts的折线图，用到了数据。

二、使用步骤

1.引入插件

先在插件市场使用插件导入到项目里
链接

2.读入数据

	<qiun-title-bar title="COD" />
	<view class="charts-box">
	<qiun-data-charts type="area"
		:opts="{yAxis:{data:[{min:0}]},extra:{area:{type:'curve',addLine:true,gradient:true}}}"
		:chartData="chartsData.Line3" :echartsH5="true" :echartsApp="true" />
	</view>

return下面加上chartsData: {},

methods: {
			schoolChange(e) {
				const index = e.target.value
				this.before_school = this.schoolList[index].stationName
				this.sid = this.schoolList[index].id
				var dataNum = {
					Id: this.sid //后台的keyWord
				}
				let that = this;
				uni.request({
					url: '',
					data: dataNum,
					header: {
						'Content-type': 'application/x-www-form-urlencoded'
					},
					method: 'GET',
					success: (res) => {
	                 let linearareadata = {
							categories: [],
							series: [
								{
								// name: "成交量A",
								areaStyle: {
									color: {
										type: 'linear',
										color:"#0b2a63",
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: '#1890FF' // 0% 处的颜色
										}, {
											offset: 1,
											color: '#FFFFFF' // 100% 处的颜色
										}],
										global: false // 缺省为 false
									}
								},
								data: [],
							
							}]
						}
						for (var i = 0; i < res.data.result.length; i++) {
							linearareadata.categories.push(res.data.result[i].collectTime); //x轴
							linearareadata.series[0].data.push(res.data.result[i].paramterValue); //y轴
						}
						that.$forceUpdate();
						that.chartsData.Line3 = linearareadata
						that.$forceUpdate();
					}
				});
				
			},

			getServerData() {
				this.colunmdata = JSON.parse(JSON.stringify(demodata.Column));

				//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
				//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
				//***注意***我是为了演示数据看起来有条理，才把chartData挂载到一个对象中，您实际项目一定不要这么做，应该每个图形一个根节点属性，***例如上面this.colunmdata这种做法***
				this.chartsData.Pie1 = JSON.parse(JSON.stringify(demodata.PieA))
				this.chartsData.Pie2 = JSON.parse(JSON.stringify(demodata.PieA))
				this.chartsData.Pie3 = JSON.parse(JSON.stringify(demodata.PieA))
				this.chartsData.Pie4 = JSON.parse(JSON.stringify(demodata.PieA))
				this.chartsData.Line3 = JSON.parse(JSON.stringify(demodata.Line))
				this.chartsData.Line6 = JSON.parse(JSON.stringify(demodata.Line))
				this.chartsData.Line9 = JSON.parse(JSON.stringify(demodata.Line))

				//处理堆叠柱状图的series
				let duidie = JSON.parse(JSON.stringify(demodata.Column))
				for (var i = 0; i < duidie.series.length; i++) {
					duidie.series[i].stack = 'one'
					duidie.series[i].barWidth = '50%'
					duidie.series[i].label = {
						position: 'inside',
						color: '#FFFFFF'
					}
				}
				//这里需要注意，一定要定义一个临时的变量再统一赋值给chartData，否则chartData具有监听属性，只要有变化就会导致重新渲染
				this.chartsData.Column2 = duidie

				let areadata = JSON.parse(JSON.stringify(demodata.Line))
				areadata.series = areadata.series.reverse()
				this.chartsData.Line3 = areadata

				//渐变色区域图
				let linearareadata = {
					categories: [],
					series: [{
						// name: "成交量A",
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#1890FF' // 0% 处的颜色
								}, {
									offset: 1,
									color: '#FFFFFF' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
						data: []
					}]
				}
				this.chartsData.Line3 = linearareadata
				console.log(this.chartsData.Line3)
				this.$forceUpdate();
			},
			complete(e) {
				console.log("渲染完成事件", e);
			},
			getIndex(e) {
				console.log("获取点击索引事件", e);
			}

总结

效果图来了：