测试ucharts
This commit is contained in:
1
App.vue
1
App.vue
@@ -13,6 +13,7 @@ export default {
|
||||
uni.setStorageSync('cidAES', cidAES);
|
||||
}, false);
|
||||
}
|
||||
|
||||
},
|
||||
onShow: function () {
|
||||
console.log('App Show')
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -49,7 +49,7 @@ export default {
|
||||
activeBgOpacity: 0.08
|
||||
}
|
||||
},
|
||||
啥}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
|
||||
Reference in New Issue
Block a user