ECharts 实现3D嵌套饼图

前端开发

705

ECharts 实现3D嵌套饼图

嵌套饼图的实现主要是定义多层数据，实际上只需要写成json格式的数组，多层数据源之间用逗号连接起来，自定义样式之后就可以实现，与非嵌套饼图没有很大的区别。

1.下载Echarts插件，官网地址：http://echarts.baidu.com/download.html

2.HTML页面引入

文件层级机构：

ECharts 实现3D嵌套饼图

源码部分：

legend:图例说明


<!DOCTYPE html>
<html style="height: 100%">
   <head>
    <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="echarts/echarts.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    backgroundColor:'#FAFAD2',
    title: {
        text: '国民营销信息来源渠道',
        left: 'center',
        //标题栏的高度，值越大，距离顶部的距离越大
        top: 50,
        //标题栏字体的颜色
        textStyle: {
            color: '#FFD700'
        }
    },
   legend:{
     orient:'vertical',
     x:'left',
     data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
    },
    tooltip:{
        trigger: 'item',
        //  ( 访问来源：
        //   百度:1048 40.9%)
        formatter: "{a} <br/>{b}:{c} ({d}%)"
    },
    series :[
        {
            //饼图中内容介绍
            name:'客户访问来源',
            //统计表的类型
            type:'pie',
            //饼图的弧度，值越小生成的饼状图越小
            radius : [0,'30%'],
            //饼状图的外围标签，位置定义inner文字标签在扇形内部
            label: {
                normal: {
                        position:'inner'
                    }                
            },
            //指向外围标签的线条,当不定义样式时候线条默认与扇形颜色相同
            labelLine: {
                normal: {
                    show:false
                }
            },
            //内层数据
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:274, name:'联盟广告'},
                {value:235, name:'视频广告'},
                {value:400, name:'搜索引擎'}
            ]
        },        
            {
            name:'访问来源',
            type:'pie',
            radius:['40%','55%'],
            label:{
            normal:{
            formatter:'{a|{a}}{abg|}\n{hr|}\n  {b|{b}: }{c}  {per|{d}%}',
            //外部标签的背景色
            backgroundColor:'#FFA07A',
            //外部标签的边框颜色
            borderColor:'#DCDCDC',
            borderWidth:1,
            borderRadius:4,
            rich:{
            a:{
            color:'#999',
            lineHeight:22,
            align:'center'
            },
            //外围标签内部划线颜色
             hr: {
                            borderColor: '#708090',
                            width: '100%',
                            borderWidth: 0.5,
                            height: 0
                        },
                        b: {
                            fontSize: 16,
                            lineHeight: 33
                        },
                        //显示百分比数据的颜色和背景色
                        per: {
                            color: '#CD5C5C',
                            backgroundColor: '#FFDEAD',
                            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:'其他'}            
            ]
            
        }
    
    ]
    
};;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

       </script>
   </body>
</html>

实现的效果：

ECharts 实现3D嵌套饼图

塔

塔罗师

让我们开始我们的约会（战争）吧

发布数

关注者

2642

累计阅读

ECharts 实现3D嵌套饼图 4年前

热门教程文档