• Vue项目中使用可视化图表echarts


    app.title = '环形图';
    
    option = {
    
        tooltip: {
    
            trigger: 'item',
    
            formatter: "{a} <br/>{b}: {c} ({d}%)"
    
        },
    
        legend: {
    
            orient: 'vertical',
    
            x: 'left',
    
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    
        },
    
        series: [
    
            {
    
                name:'访问来源',
    
                type:'pie',
    
                radius: ['50%', '70%'],
    
                avoidLabelOverlap: false,
    
                label: {
    
                    normal: {
    
                        show: false,
    
                        position: 'center'
    
                    },
    
                    emphasis: {
    
                        show: true,
    
                        textStyle: {
    
                            fontSize: '30',
    
                            fontWeight: 'bold'
    
                        }
    
                    }
    
                },
    
                labelLine: {
    
                    normal: {
    
                        show: false
    
                    }
    
                },
    
                data:[
    
                    {value:335, name:'直接访问'},
    
                    {value:310, name:'邮件营销'},
    
                    {value:234, name:'联盟广告'},
    
                    {value:135, name:'视频广告'},
    
                    {value:1548, name:'搜索引擎'}
    
                ]
    
            }
    
        ]
    
    };

    1、本地安装:

    可以使用 npm 安装 ECharts:

    npm install echarts

    2、在index.html中引入 echarts

    import echarts from 'echarts'
    3、写一个div容器用来承载图表:
    1 <div class="hccalone">
    2        <div  id="teamLeader" style="float:left;100%;height: 300px"></div>
    3 </div>

    4、写一个方法用来初始化图表代码

    getTeamLeader(){
    
                var myChart = echarts.init(document.getElementById('teamLeader'));
    
                myChart.setOption({
    
                  title : {
    
                    text: '团队考核情况',
    
                    x:'center'
    
                },
    
                tooltip: {
    
                    trigger: 'item',
    
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
    
                },
    
                legend: {
    
                    orient: 'vertical',
    
                    x: 'left',
    
                    data:['已完成','未完成']
    
                },
    
                series: [
    
                    {
    
                        name:'访问来源',
    
                        type:'pie',
    
                        radius: ['50%', '70%'],
    
                        avoidLabelOverlap: false,
    
                        label: {
    
                            normal: {
    
                                show: false,
    
                                position: 'center'
    
                            },
    
                            emphasis: {
    
                                show: true,
    
                                textStyle: {
    
                                    fontSize: '30',
    
                                    fontWeight: 'bold'
    
                                }
    
                            }
    
                        },
    
                        labelLine: {
    
                            normal: {
    
                                show: false
    
                            }
    
                        },
    
                        data:[
    
                            {value:50, name:'已完成'},
    
                            {value:50, name:'未完成'}
    
                        ]
    
                    }
    
                ]
    
              });
    
            }

    5、最后在初始化页面的时候,调用一下这个方法即可,就可以看到图表了

     

  • 相关阅读:
    leetcode 105. 从前序与中序遍历序列构造二叉树
    leetcode 96. 不同的二叉搜索树
    leetcode 21. 合并两个有序链表
    leetcode 617. 合并二叉树
    leetcode 101. 对称二叉树
    欧拉定理和扩展欧拉定理。
    [NOI2018] 屠龙勇士
    [SDOI2010]古代猪文
    [SDOI2013]方程
    扩展Lucas定理
  • 原文地址:https://www.cnblogs.com/mo3408/p/12213296.html
Copyright © 2020-2023  润新知