echarts之环形图

83 阅读 0 评论 55 点赞

我是靠谱客的博主等待大象，最近开发中收集的这篇文章主要介绍echarts之环形图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

环形图，实际上就是饼图，，先贴上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入echarts文件-->
    <script src="../js/echarts.min.js"></script>
    <script src="../js/echarts.js"></script>
    <script src="../theme/dark.js"></script>
    <title>柱状图</title>
</head>
<body>
<!--准备一个dom容器-->
<div id="main" style="width:600px;height:400px"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        tooltip: {//提示框，可以在全局也可以在
            trigger: 'item',  //提示框的样式
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            color:'#000', //提示框的背景色
            textStyle:{ //提示的字体样式
                color:"black",
            }
        },
        legend: {  //图例
            orient: 'vertical',  //图例的布局，竖直    horizontal为水平
            x: 'right',//图例显示在右边
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
            textStyle:{    //图例文字的样式
                color:'#333',  //文字颜色
                fontSize:12    //文字大小
            }
        },
        series: [
            {
                name:'访问来源',
                type:'pie', //环形图的type和饼图相同
                radius: ['50%', '70%'],//饼图的半径，第一个为内半径，第二个为外半径
                avoidLabelOverlap: false,
                color:['#D1FBEF','#F9D858','#4CD0DD','#DF86F0','#F5A7C1'],
                label: {
                    normal: {  //正常的样式
                        show: true,
                        position: 'left'
                    },
                    emphasis: { //选中时候的样式
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },  //提示文字
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>