123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- <template>
- <div :id="id" style="height: 100%;width:100%;padding: 20px;"></div>
- </template>
- <script>
- export default {
- data () {
- return {}
- },
- props:{
- id:{
- type: String
- }
- },
- mounted(){
- this.drawLine();
- },
- methods:{
- drawLine(){
- let _this = this
- // 基于准备好的dom,初始化echarts实例
- let myChart = this.$echarts.init(document.getElementById(this.id));
- myChart.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>
- <style>
- </style>
|