hupeng
5 years ago
42 changed files with 371 additions and 128 deletions
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 13 KiB |
@ -0,0 +1,87 @@ |
|||||||
|
<template> |
||||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import echarts from 'echarts' |
||||||
|
require('echarts/theme/macarons') // echarts theme |
||||||
|
import { getOrderCount } from '@/api/visits' |
||||||
|
import { debounce } from '@/utils' |
||||||
|
|
||||||
|
export default { |
||||||
|
props: { |
||||||
|
className: { |
||||||
|
type: String, |
||||||
|
default: 'chart' |
||||||
|
}, |
||||||
|
width: { |
||||||
|
type: String, |
||||||
|
default: '100%' |
||||||
|
}, |
||||||
|
height: { |
||||||
|
type: String, |
||||||
|
default: '300px' |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
chart: null, |
||||||
|
column: [], |
||||||
|
orderCountDatas: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
getOrderCount().then(res => { |
||||||
|
this.column = res.column, |
||||||
|
this.orderCountDatas = res.orderCountDatas |
||||||
|
}).then(() =>{ |
||||||
|
this.initChart() |
||||||
|
}) |
||||||
|
|
||||||
|
this.__resizeHandler = debounce(() => { |
||||||
|
if (this.chart) { |
||||||
|
this.chart.resize() |
||||||
|
} |
||||||
|
}, 100) |
||||||
|
window.addEventListener('resize', this.__resizeHandler) |
||||||
|
}, |
||||||
|
beforeDestroy() { |
||||||
|
if (!this.chart) { |
||||||
|
return |
||||||
|
} |
||||||
|
window.removeEventListener('resize', this.__resizeHandler) |
||||||
|
this.chart.dispose() |
||||||
|
this.chart = null |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initChart() { |
||||||
|
this.chart = echarts.init(this.$el, 'macarons') |
||||||
|
|
||||||
|
this.chart.setOption({ |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: '{a} <br/>{b} : {c} ({d}%)' |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
left: 'center', |
||||||
|
bottom: '10', |
||||||
|
data: this.column |
||||||
|
}, |
||||||
|
calculable: true, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '商品分类销售占总销售的比例', |
||||||
|
type: 'pie', |
||||||
|
roseType: 'radius', |
||||||
|
radius: [15, 95], |
||||||
|
center: ['50%', '38%'], |
||||||
|
data: this.orderCountDatas, |
||||||
|
animationEasing: 'cubicInOut', |
||||||
|
animationDuration: 2600 |
||||||
|
} |
||||||
|
] |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
Loading…
Reference in new issue