优化折线图
parent
d4cc5a025e
commit
3523380010
|
@ -22,7 +22,7 @@
|
|||
<text>{{ titleName+echartName }}</text>
|
||||
</view>
|
||||
<view id="echart_p">
|
||||
<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true"
|
||||
<qiun-data-charts type="area" :opts="opts" :chartData="chartData" :ontouch="true"
|
||||
background="none" />
|
||||
</view>
|
||||
</view>
|
||||
|
@ -44,20 +44,23 @@
|
|||
chartData: {},
|
||||
opts: {
|
||||
color: ["#24B383"],
|
||||
padding: [15, 10, 0, 15],
|
||||
padding: [15, 35, 0, 15],
|
||||
dataLabel: false,
|
||||
dataPointShape: false,
|
||||
enableScroll: true,
|
||||
enableScroll: false,
|
||||
legend: {},
|
||||
tooltipShow: true,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
scrollShow: true,
|
||||
scrollAlign: 'left',
|
||||
scrollColor: '#24B383',
|
||||
scrollBackgroundColor: '#DFE5E4',
|
||||
itemCount: 3,
|
||||
// scrollShow: true,
|
||||
labelCount: 4,
|
||||
// scrollAlign: 'left',
|
||||
// scrollColor: '#24B383',
|
||||
// scrollBackgroundColor: '#DFE5E4',
|
||||
// itemCount: '5',
|
||||
boundaryGap: "justify",
|
||||
format: "",
|
||||
// format: "",
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
|
@ -66,14 +69,14 @@
|
|||
data: [{
|
||||
title: '',
|
||||
min: 0,
|
||||
// max: 14
|
||||
// max: '',
|
||||
titleOffsetY: -5,
|
||||
}]
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
opacity: 0.8,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
|
@ -98,7 +101,7 @@
|
|||
|
||||
},
|
||||
onLoad(option) {
|
||||
console.log(option);
|
||||
// console.log(option);
|
||||
if (option.id) {
|
||||
this.equipmentId = option.id
|
||||
}
|
||||
|
@ -147,10 +150,16 @@
|
|||
this.valuePHList.push(i.value)
|
||||
})
|
||||
this.getServerData();
|
||||
|
||||
this.categoriesList = this.categoriesList.map(item => {
|
||||
return item.split(' ')[1]
|
||||
})
|
||||
// this.opts.xAxis.itemCount = this.categoriesList.length
|
||||
// console.log(this.categoriesList,'this.categoriesList');
|
||||
// console.log(this.valuePHList,'this.valuePHList');
|
||||
this.newValuePHList = this.valuePHList.map((e, index) => {
|
||||
return e[this.titleName+this.echartName] == undefined ? '' : e[this.titleName+this.echartName]
|
||||
return e[this.titleName + this.echartName] == undefined ? '' : e[this.titleName +
|
||||
this.echartName]
|
||||
})
|
||||
console.log(this.newValuePHList, '121212212121211111111');
|
||||
})
|
||||
|
@ -266,7 +275,7 @@
|
|||
width: 100%;
|
||||
height: calc(100% - 74rpx);
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
padding: 0 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -210,21 +210,24 @@ var _default = {
|
|||
chartData: {},
|
||||
opts: {
|
||||
color: ["#24B383"],
|
||||
padding: [15, 10, 0, 15],
|
||||
padding: [15, 35, 0, 15],
|
||||
dataLabel: false,
|
||||
dataPointShape: false,
|
||||
enableScroll: true,
|
||||
enableScroll: false,
|
||||
legend: {},
|
||||
tooltipShow: true,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
scrollShow: true,
|
||||
scrollAlign: 'left',
|
||||
scrollColor: '#24B383',
|
||||
scrollBackgroundColor: '#DFE5E4',
|
||||
itemCount: 3,
|
||||
boundaryGap: "justify",
|
||||
format: ""
|
||||
// scrollShow: true,
|
||||
labelCount: 4,
|
||||
// scrollAlign: 'left',
|
||||
// scrollColor: '#24B383',
|
||||
// scrollBackgroundColor: '#DFE5E4',
|
||||
// itemCount: '5',
|
||||
boundaryGap: "justify"
|
||||
// format: "",
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
dashLength: 2,
|
||||
|
@ -232,14 +235,14 @@ var _default = {
|
|||
data: [{
|
||||
title: '',
|
||||
min: 0,
|
||||
// max: 14
|
||||
// max: '',
|
||||
titleOffsetY: -5
|
||||
}]
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
opacity: 0.8,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
|
@ -261,7 +264,7 @@ var _default = {
|
|||
// this.getServerData();
|
||||
},
|
||||
onLoad: function onLoad(option) {
|
||||
console.log(option);
|
||||
// console.log(option);
|
||||
if (option.id) {
|
||||
this.equipmentId = option.id;
|
||||
}
|
||||
|
@ -309,6 +312,10 @@ var _default = {
|
|||
_this2.valuePHList.push(i.value);
|
||||
});
|
||||
_this2.getServerData();
|
||||
_this2.categoriesList = _this2.categoriesList.map(function (item) {
|
||||
return item.split(' ')[1];
|
||||
});
|
||||
// this.opts.xAxis.itemCount = this.categoriesList.length
|
||||
// console.log(this.categoriesList,'this.categoriesList');
|
||||
// console.log(this.valuePHList,'this.valuePHList');
|
||||
_this2.newValuePHList = _this2.valuePHList.map(function (e, index) {
|
||||
|
|
|
@ -1 +1 @@
|
|||
<view class="target_water_fertilizer_PH data-v-3d983434"><u-navbar vue-id="454957e0-1" background="{{background}}" is-back="{{true}}" back-icon-color="#FFFFFF" border-bottom="{{false}}" title="{{titleName+echartName}}" title-color="#FFFFFF" title-bold="{{true}}" title-size="32" class="data-v-3d983434" bind:__l="__l"></u-navbar><view class="navbar data-v-3d983434"><image src="../../static/PH_bg.png" mode class="data-v-3d983434"></image></view><view class="content data-v-3d983434"><view class="number data-v-3d983434">{{''+(valuePH+unit)+''}}</view><view class="data_analysis data-v-3d983434"><image src="../../static/data_analysis.png" mode class="data-v-3d983434"></image><text class="data-v-3d983434">数据分析</text></view><view class="echart data-v-3d983434"><view class="title data-v-3d983434"><image src="../../static/icon_ph.png" mode class="data-v-3d983434"></image><text class="data-v-3d983434">{{titleName+echartName}}</text></view><view id="echart_p" class="data-v-3d983434"><qiun-data-charts vue-id="454957e0-2" type="line" opts="{{opts}}" chartData="{{chartData}}" ontouch="{{true}}" background="none" class="data-v-3d983434" bind:__l="__l"></qiun-data-charts></view></view></view></view>
|
||||
<view class="target_water_fertilizer_PH data-v-3d983434"><u-navbar vue-id="454957e0-1" background="{{background}}" is-back="{{true}}" back-icon-color="#FFFFFF" border-bottom="{{false}}" title="{{titleName+echartName}}" title-color="#FFFFFF" title-bold="{{true}}" title-size="32" class="data-v-3d983434" bind:__l="__l"></u-navbar><view class="navbar data-v-3d983434"><image src="../../static/PH_bg.png" mode class="data-v-3d983434"></image></view><view class="content data-v-3d983434"><view class="number data-v-3d983434">{{''+(valuePH+unit)+''}}</view><view class="data_analysis data-v-3d983434"><image src="../../static/data_analysis.png" mode class="data-v-3d983434"></image><text class="data-v-3d983434">数据分析</text></view><view class="echart data-v-3d983434"><view class="title data-v-3d983434"><image src="../../static/icon_ph.png" mode class="data-v-3d983434"></image><text class="data-v-3d983434">{{titleName+echartName}}</text></view><view id="echart_p" class="data-v-3d983434"><qiun-data-charts vue-id="454957e0-2" type="area" opts="{{opts}}" chartData="{{chartData}}" ontouch="{{true}}" background="none" class="data-v-3d983434" bind:__l="__l"></qiun-data-charts></view></view></view></view>
|
|
@ -108,6 +108,6 @@
|
|||
width: 100%;
|
||||
height: calc(100% - 74rpx);
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
padding: 0 0rpx;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue