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