vue中用echarts插件

最新推荐文章于 2024-09-07 19:48:06 发布

qq8344310

最新推荐文章于 2024-09-07 19:48:06 发布

阅读量186

点赞数

本文链接：https://blog.csdn.net/qq8344310/article/details/100200974

版权

先安装echarts

<template>
  <div class="one">
    <div id="main" style="width: 300px;height: 300px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts';
export default {
  name: 'Home',
  mounted(){
    this.$nextTick(function() {
        this.drawPie('main')
    })
    // this.SetEchart();
  },
  data () {
    return {
        charts: '',
        opinionData:[
            {value:335, name:'直接访问'},
            {value:310, name:'邮件营销'},
            {value:234, name:'联盟广告'},
            {value:135, name:'视频广告'},
            {value:1548, name:'搜索引擎'}
        ]
    }
  },
  methods: {
        drawPie(id){
            this.charts = echarts.init(document.getElementById(id))
            this.charts.setOption({
                title:{
                    text:'医院地区\n人次占比',
                    left:'center',
                    top:'center',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a}<br/>{b}:{c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data:this.opinion
                },
                series: [
                {
                    name:'访问来源',
                    type:'pie',
                    radius:['50%','70%'],
                    avoidLabelOverlap: false,
                    label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                        fontSize: '30',
                        fontWeight: 'blod'
                        }
                    }
                    },
                    labelLine: {
                    normal: {
                        show: false
                    }
                    },
                    data:this.opinionData
                }
                ]
            })
        }
  }
}
</script>
<style scoped>
#myChart{
  width: 500px;
  height: 300px;
}
</style>