测试ucharts
This commit is contained in:
@@ -3,7 +3,8 @@
|
||||
<view>
|
||||
<uni-data-checkbox multiple v-model="checkbox" :localdata="hobby"></uni-data-checkbox>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
|
||||
<qiun-data-charts ontouch onzoom type="line" :opts="opts" :chartData="chartData" />
|
||||
<qiun-data-charts ontouch onzoom type="line" :opts="opts" :chartData="chartData" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -12,7 +13,7 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checkbox: [0,1,2],
|
||||
checkbox: [0, 1, 2],
|
||||
hobby: [{
|
||||
text: '电网电压1',
|
||||
value: 0
|
||||
@@ -33,10 +34,11 @@ export default {
|
||||
padding: [15, 15, 0, 0],
|
||||
dataLabel: false,
|
||||
dataPointShape: false,
|
||||
enableScroll: false,
|
||||
enableScroll: true,
|
||||
legend: {},
|
||||
xAxis: {
|
||||
disableGrid: true
|
||||
disableGrid: true,
|
||||
itemCount: 10240,
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
@@ -48,102 +50,57 @@ export default {
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
line: {
|
||||
type: "curve",
|
||||
width: 2,
|
||||
activeType: "hollow",
|
||||
linearType: "custom"
|
||||
}
|
||||
}
|
||||
}
|
||||
// extra: {
|
||||
// line: {
|
||||
// type: "curve",
|
||||
// width: 2,
|
||||
// activeType: "hollow",
|
||||
// linearType: "custom"
|
||||
// }
|
||||
// }
|
||||
},
|
||||
testDataA: [],
|
||||
testDataB: [],
|
||||
testDataC: [],
|
||||
testCategories: []
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.getServerData();
|
||||
},
|
||||
methods: {
|
||||
touchmove (e) {
|
||||
console.log(e)
|
||||
},
|
||||
getServerData () {
|
||||
//模拟从服务器获取数据时的延时
|
||||
setTimeout(() => {
|
||||
this.testDataA = [80, 60, 95, 50, 95]
|
||||
this.testDataB = [95, 50, 50, 95, 50]
|
||||
this.testDataC = [50, 60, 40, 50, 60]
|
||||
this.testCategories = ["0", "90", "180", "270", "360"]
|
||||
for (let index = 0; index < 9; index++) {
|
||||
this.testDataA.push(...this.testDataA)
|
||||
this.testDataB.push(...this.testDataB)
|
||||
this.testDataC.push(...this.testDataC)
|
||||
this.testCategories.push(...this.testCategories)
|
||||
}
|
||||
//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
|
||||
let res = {
|
||||
categories: ["0", "90", "180", "270", "360"],
|
||||
categories: this.testCategories,
|
||||
series: [
|
||||
{
|
||||
name: "成交量A",
|
||||
linearColor: [
|
||||
[
|
||||
0,
|
||||
"#1890FF"
|
||||
],
|
||||
[
|
||||
0.25,
|
||||
"#00B5FF"
|
||||
],
|
||||
[
|
||||
0.5,
|
||||
"#00D1ED"
|
||||
],
|
||||
[
|
||||
0.75,
|
||||
"#00E6BB"
|
||||
],
|
||||
[
|
||||
1,
|
||||
"#90F489"
|
||||
]
|
||||
],
|
||||
data: [-50, 60, 15, 45, 15]
|
||||
data: this.testDataA
|
||||
},
|
||||
{
|
||||
name: "成交量B",
|
||||
linearColor: [
|
||||
[
|
||||
0,
|
||||
"#91CB74"
|
||||
],
|
||||
[
|
||||
0.25,
|
||||
"#2BDCA8"
|
||||
],
|
||||
[
|
||||
0.5,
|
||||
"#2AE3A0"
|
||||
],
|
||||
[
|
||||
0.75,
|
||||
"#C4D06E"
|
||||
],
|
||||
[
|
||||
1,
|
||||
"#F2D375"
|
||||
]
|
||||
],
|
||||
data: [-50, -80, 55, 85, 55]
|
||||
},
|
||||
{
|
||||
name: "成交量C",
|
||||
linearColor: [
|
||||
[
|
||||
0,
|
||||
"#FAC858"
|
||||
],
|
||||
[
|
||||
0.33,
|
||||
"#FFC371"
|
||||
],
|
||||
[
|
||||
0.66,
|
||||
"#FFC2B2"
|
||||
],
|
||||
[
|
||||
1,
|
||||
"#FA7D8D"
|
||||
]
|
||||
],
|
||||
data: [80, 60, 95, 50, 95]
|
||||
}
|
||||
// {
|
||||
// name: "成交量B",
|
||||
// data: this.testDataB
|
||||
// },
|
||||
// {
|
||||
// name: "成交量C",
|
||||
// data: this.testDataC
|
||||
// }
|
||||
]
|
||||
};
|
||||
this.chartData = JSON.parse(JSON.stringify(res));
|
||||
|
||||
@@ -49,7 +49,7 @@ export default {
|
||||
activeBgOpacity: 0.08
|
||||
}
|
||||
},
|
||||
啥}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
|
||||
Reference in New Issue
Block a user