测试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); uni.setStorageSync('cidAES', cidAES);
}, false); }, false);
} }
}, },
onShow: function () { onShow: function () {
console.log('App Show') console.log('App Show')

View File

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

View File

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

View File

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