54 lines
1.4 KiB
Vue
54 lines
1.4 KiB
Vue
<template>
|
|
<ciy-header ref="header" title="图表"></ciy-header>
|
|
<view>
|
|
<view class="ciy-card">
|
|
<view class="title">饼图1</view>
|
|
<view class="content">
|
|
<view style="width:7em;height:7em;margin:auto;">
|
|
<ciy-chart-pie :data="chartdata"></ciy-chart-pie>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ciy-card">
|
|
<view class="title">饼图2</view>
|
|
<view class="content">
|
|
<view style="width:9em;height:9em;margin:auto;">
|
|
<ciy-chart-pie :data="chartdata">
|
|
<view style="position:relative;width:65%;height:65%;text-align:center;background:var(--bg6);border-radius: 50%;display: flex;justify-content: center;align-items: center;">
|
|
<text style="font-size:0.9em;font-weight: bold;">文字</text>
|
|
</view>
|
|
<view style="width:100%;height:100%;position: absolute;top:0;border-radius: 50%;box-shadow: 0px 0px 0 6px #ffffff22;">
|
|
</view>
|
|
</ciy-chart-pie>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<button class="btn sm" @tap="chgdata">变更</button>
|
|
</view>
|
|
</template>
|
|
|
|
<style>
|
|
</style>
|
|
|
|
<script>
|
|
import '@/pages/demo/zdemo.css';
|
|
import zmixin from '@/pages/demo/zmixin.js';
|
|
export default {
|
|
mixins: [zmixin],
|
|
data() {
|
|
return {
|
|
chartdata: '120|#ff8d1a,320|#ffeb3b'
|
|
}
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
chgdata() {
|
|
var ds = [];
|
|
var max = parseInt(Math.random() * 5) + 2;
|
|
for (var i = 0; i < max; i++)
|
|
ds.push(parseInt(Math.random() * 100));
|
|
this.chartdata = ds.join(',');
|
|
}
|
|
}
|
|
}
|
|
</script> |