150 lines
3.8 KiB
Vue
150 lines
3.8 KiB
Vue
<template>
|
||
<div :class="className" :style="{height:height,width:width}" />
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from 'echarts'
|
||
|
||
require('echarts/theme/macarons') // echarts theme
|
||
import { debounce } from '@/utils'
|
||
|
||
export default {
|
||
props: {
|
||
className: {
|
||
type: String,
|
||
default: 'chart'
|
||
},
|
||
width: {
|
||
type: String,
|
||
default: '100%'
|
||
},
|
||
height: {
|
||
type: String,
|
||
default: '500px'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
chart: null
|
||
}
|
||
},
|
||
mounted() {
|
||
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: {
|
||
orient: 'vertical',
|
||
x: 'left',
|
||
data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
|
||
},
|
||
series: [
|
||
{
|
||
name: '访问来源',
|
||
type: 'pie',
|
||
selectedMode: 'single',
|
||
radius: [0, '30%'],
|
||
|
||
label: {
|
||
normal: {
|
||
position: 'inner'
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
data: [
|
||
{ value: 335, name: '直达', selected: true },
|
||
{ value: 679, name: '营销广告' },
|
||
{ value: 1548, name: '搜索引擎' }
|
||
]
|
||
},
|
||
{
|
||
name: '访问来源',
|
||
type: 'pie',
|
||
radius: ['40%', '55%'],
|
||
label: {
|
||
normal: {
|
||
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
|
||
backgroundColor: '#eee',
|
||
borderColor: '#aaa',
|
||
borderWidth: 1,
|
||
borderRadius: 4,
|
||
shadowBlur: 3,
|
||
shadowOffsetX: 2,
|
||
shadowOffsetY: 2,
|
||
shadowColor: '#999',
|
||
padding: [0, 7],
|
||
rich: {
|
||
a: {
|
||
color: '#999',
|
||
lineHeight: 22,
|
||
align: 'center'
|
||
},
|
||
abg: {
|
||
backgroundColor: '#333',
|
||
width: '100%',
|
||
align: 'right',
|
||
height: 22,
|
||
borderRadius: [4, 4, 0, 0]
|
||
},
|
||
hr: {
|
||
borderColor: '#aaa',
|
||
width: '100%',
|
||
borderWidth: 0.5,
|
||
height: 0
|
||
},
|
||
b: {
|
||
fontSize: 16,
|
||
lineHeight: 33
|
||
},
|
||
per: {
|
||
color: '#eee',
|
||
backgroundColor: '#334455',
|
||
padding: [2, 4],
|
||
borderRadius: 2
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data: [
|
||
{ value: 335, name: '直达' },
|
||
{ value: 310, name: '邮件营销' },
|
||
{ value: 234, name: '联盟广告' },
|
||
{ value: 135, name: '视频广告' },
|
||
{ value: 1048, name: '百度' },
|
||
{ value: 251, name: '谷歌' },
|
||
{ value: 147, name: '必应' },
|
||
{ value: 102, name: '其他' }
|
||
]
|
||
}
|
||
]
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|