69 lines
1.7 KiB
Vue
69 lines
1.7 KiB
Vue
<template>
|
|
<view class="charts-box">
|
|
<view class="chartTypeSelector">
|
|
<image @click="setType('area')" :src="`/static/partner/lineChart_${type === 'area' ? 'active' : 'inactive'}.png`" mode="aspectFit" class="typeIcon"></image>
|
|
<image @click="setType('column')" :src="`/static/partner/columnChart_${type === 'column' ? 'active' : 'inactive'}.png`" mode="aspectFit" class="typeIcon"></image>
|
|
</view>
|
|
<qiun-data-charts ref="charts" :type="type" :opts="opts" :chartData="chartData" :ontouch="true" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { nextTick } from '../../../uni_modules/lime-shared/vue';
|
|
export default {
|
|
name: 'OverviewChart',
|
|
props: {
|
|
chartData: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
|
type: 'area',
|
|
data: {},
|
|
opts: {
|
|
color: ['#25C0E5'],
|
|
padding: [15, 0, 0, 0],
|
|
touchMoveLimit: 24,
|
|
enableScroll: true,
|
|
legend: {},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
scrollShow: true,
|
|
itemCount: 8
|
|
},
|
|
yAxis: {
|
|
gridType: 'dash',
|
|
dashLength: 2
|
|
},
|
|
extra: {
|
|
area: {
|
|
type: 'curve',
|
|
opacity: 0.2,
|
|
addLine: true,
|
|
width: 2,
|
|
gradient: true,
|
|
activeType: 'hollow'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
setType(type) {
|
|
this.type = type;
|
|
nextTick(() => {
|
|
this.$refs.charts.reloading();
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './index.scss';
|
|
</style>
|