测试ucharts
This commit is contained in:
1
App.vue
1
App.vue
@@ -13,6 +13,7 @@ export default {
|
|||||||
uni.setStorageSync('cidAES', cidAES);
|
uni.setStorageSync('cidAES', cidAES);
|
||||||
}, false);
|
}, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
onShow: function () {
|
onShow: function () {
|
||||||
console.log('App Show')
|
console.log('App Show')
|
||||||
|
|||||||
@@ -18,7 +18,6 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
htmlToCanvas (option) {
|
htmlToCanvas (option) {
|
||||||
let posterImg = option.posterImg;
|
let posterImg = option.posterImg;
|
||||||
console.log(posterImg);
|
|
||||||
this.$emit('renderFinish', posterImg);
|
this.$emit('renderFinish', posterImg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -33,13 +32,10 @@ export default {
|
|||||||
console.log(123);
|
console.log(123);
|
||||||
// 获取设备dpi
|
// 获取设备dpi
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
console.log(domId);
|
|
||||||
let dom = document.getElementById(domId);
|
let dom = document.getElementById(domId);
|
||||||
console.log(dom);
|
|
||||||
html2canvas(dom, {
|
html2canvas(dom, {
|
||||||
scale: 8,
|
scale: 8,
|
||||||
useCORS: true,
|
useCORS: true,
|
||||||
|
|
||||||
}).then((canvas) => {
|
}).then((canvas) => {
|
||||||
// this.$refs.header.appendChild(canvas);
|
// this.$refs.header.appendChild(canvas);
|
||||||
const posterImg = canvas.toDataURL()
|
const posterImg = canvas.toDataURL()
|
||||||
|
|||||||
@@ -3,7 +3,8 @@
|
|||||||
<view>
|
<view>
|
||||||
<uni-data-checkbox multiple v-model="checkbox" :localdata="hobby"></uni-data-checkbox>
|
<uni-data-checkbox multiple v-model="checkbox" :localdata="hobby"></uni-data-checkbox>
|
||||||
<view class="charts-box">
|
<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>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -33,10 +34,11 @@ export default {
|
|||||||
padding: [15, 15, 0, 0],
|
padding: [15, 15, 0, 0],
|
||||||
dataLabel: false,
|
dataLabel: false,
|
||||||
dataPointShape: false,
|
dataPointShape: false,
|
||||||
enableScroll: false,
|
enableScroll: true,
|
||||||
legend: {},
|
legend: {},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
disableGrid: true
|
disableGrid: true,
|
||||||
|
itemCount: 10240,
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
gridType: "dash",
|
gridType: "dash",
|
||||||
@@ -48,102 +50,57 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
extra: {
|
// extra: {
|
||||||
line: {
|
// line: {
|
||||||
type: "curve",
|
// type: "curve",
|
||||||
width: 2,
|
// width: 2,
|
||||||
activeType: "hollow",
|
// activeType: "hollow",
|
||||||
linearType: "custom"
|
// linearType: "custom"
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
},
|
||||||
|
testDataA: [],
|
||||||
|
testDataB: [],
|
||||||
|
testDataC: [],
|
||||||
|
testCategories: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.getServerData();
|
this.getServerData();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
touchmove (e) {
|
||||||
|
console.log(e)
|
||||||
|
},
|
||||||
getServerData () {
|
getServerData () {
|
||||||
//模拟从服务器获取数据时的延时
|
//模拟从服务器获取数据时的延时
|
||||||
setTimeout(() => {
|
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 = {
|
let res = {
|
||||||
categories: ["0", "90", "180", "270", "360"],
|
categories: this.testCategories,
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "成交量A",
|
name: "成交量A",
|
||||||
linearColor: [
|
data: this.testDataA
|
||||||
[
|
|
||||||
0,
|
|
||||||
"#1890FF"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.25,
|
|
||||||
"#00B5FF"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.5,
|
|
||||||
"#00D1ED"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.75,
|
|
||||||
"#00E6BB"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
1,
|
|
||||||
"#90F489"
|
|
||||||
]
|
|
||||||
],
|
|
||||||
data: [-50, 60, 15, 45, 15]
|
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
name: "成交量B",
|
// name: "成交量B",
|
||||||
linearColor: [
|
// data: this.testDataB
|
||||||
[
|
// },
|
||||||
0,
|
// {
|
||||||
"#91CB74"
|
// name: "成交量C",
|
||||||
],
|
// data: this.testDataC
|
||||||
[
|
// }
|
||||||
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]
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
this.chartData = JSON.parse(JSON.stringify(res));
|
this.chartData = JSON.parse(JSON.stringify(res));
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ export default {
|
|||||||
activeBgOpacity: 0.08
|
activeBgOpacity: 0.08
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
啥}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|||||||
Reference in New Issue
Block a user