测试ucharts

This commit is contained in:
仲么了
2023-03-27 09:39:50 +08:00
parent 02e950130d
commit 3f966d4024
4 changed files with 44 additions and 90 deletions

View File

@@ -13,6 +13,7 @@ export default {
uni.setStorageSync('cidAES', cidAES);
}, false);
}
},
onShow: function () {
console.log('App Show')

View File

@@ -18,7 +18,6 @@ export default {
methods: {
htmlToCanvas (option) {
let posterImg = option.posterImg;
console.log(posterImg);
this.$emit('renderFinish', posterImg);
}
}
@@ -33,13 +32,10 @@ export default {
console.log(123);
// 获取设备dpi
setTimeout(() => {
console.log(domId);
let dom = document.getElementById(domId);
console.log(dom);
html2canvas(dom, {
scale: 8,
useCORS: true,
}).then((canvas) => {
// this.$refs.header.appendChild(canvas);
const posterImg = canvas.toDataURL()

View File

@@ -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>
@@ -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));

View File

@@ -49,7 +49,7 @@ export default {
activeBgOpacity: 0.08
}
},
}
}
};
},
mounted () {