1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- <template>
- <div :id="id" style="height: 100%;width:100%;"></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}%)"
- },
- series: [
- {
- name:'访问来源',
- type:'pie',
- radius: ['50%', '70%'],
- avoidLabelOverlap: false,
- label: {
- normal: {
- show: false,
- position: 'center',
- formatter: '{text|{b}}\n{value|{d}%}',
- rich: {
- text: {
- color: "#fefefe",
- // fontSize: 14,
- align: 'center',
- verticalAlign: 'middle',
- padding: 5
- },
- value: {
- color: "#fefefe",
- // fontSize: 24,
- align: 'center',
- verticalAlign: 'middle',
- },
- }
- },
- emphasis: {
- show: true,
- textStyle: {
- fontSize: 46,
- }
- }
- },
- labelLine: {
- normal: {
- show: false
- }
- },
- data:[
- {value:335, name:'直接访问'},
- {value:310, name:'邮件营销'},
- {value:234, name:'联盟广告'},
- {value:135, name:'视频广告'},
- {value:1548, name:'搜索引擎'}
- ]
- }
- ]
- });
- myChart.dispatchAction({
- type: 'highlight',
- // seriesIndex: 1,
- dataIndex: 2
- });
- }
- }
- }
- </script>
- <style>
- </style>
|