使用echarts创建嵌套环形图/How to use echarts to make Nested Ring

Summary:

echarts is a very good pure Javascript open source chart library that runs smoothly on PC and mobile devices and is compatible with most current browsers including IE8 / 9/10/11, Chrome, Firefox, Safari and others.

echarts是一款非常优秀的纯 Javascript 的开源图表库，可以在 PC 和移动设备上运行的很流畅，兼容目前大部分浏览器包括IE8/9/10/11，Chrome，Firefox，Safari等。

您将从这个教程中学到什么

• 如何定义图例
• 如何定义鼠标触发提示效果
• 如何定义内环值
• 如何定义外环值
• 如何定义外环提示效果

学习此教程的必备条件

• 你需要一个代码编辑器，比如Eclipse，EditPlus，EmEditor等等
• 你需要下载echarts.js

教程难度

• 简单

教程内容

演示效果

1. 知识点A - 如何定义图例

legend: {
        orient: 'vertical',
        x: 'left',
        data:['DemoA','DemoB','DemoC','DemoD','DemoE','DemoF','DemoG','DemoH','DemoI','DemoJ','DemoL','DemoM','DemoN']
    },

orient：定义图例列表的布局朝向。
vertical：图例定义为竖排

horizontal：图例定义为横排

data：使用数组定义图例，格式['AAAA','BBBB','.......']

---

2. 知识点B - 如何定义鼠标触发提示效果

tooltip: { 
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },

trigger：定义为’item’时只会显示该点的数据
formatter：定义了提示显示的格式及样式

---

3. 知识点C - 如何定义内环值

{
            name:'访问来源',
            type:'pie',
            selectedMode: 'single',
            radius: [0, '35%'],
            label: {
                normal: {
                    position: 'inner'
                }
            },
            data:[
                {value:315, name:'DemoL'},
                {value:669, name:'DemoM'},
                {value:1448, name:'DemoN'}
            ]
        },

type：定义了为饼图
selectedMode：定义了图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。single为单选模式
multiple为多选模式
radius：极坐标系的半径，数组的第一项是内半径，第二项是外半径。支持设置成百分比，相对于容器高宽中较小的一项的一半。
position：定义内环的位置
data：定义内环的数据

---

4. 知识点D - 如何定义外环值

data:[
                {value:333, name:'DemoA'},
                {value:315, name:'DemoB'},
                {value:234, name:'DemoC'},
                {value:134, name:'DemoD'},
                {value:643, name:'DemoE'},
                {value:251, name:'DemoF'},
                {value:145, name:'DemoG'},
                {value:110, name:'DemoH'},
                {value:305, name:'DemoI'},
                {value:205, name:'DemoJ'}
            ]

data：使用数组定义外环的数据，name字段值需要与图例中数组的值相同。

5. 知识点E - 如何定义外环提示效果

label: {
                normal: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#E6E6E6', 
                    borderColor: '#bbb', 
                    borderWidth: 1, 
                    borderRadius: 4, 
                    rich: {
                        a: {
                            color: '#666',
                            lineHeight: 22,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#aaa',
                            width: '100%',
                            borderWidth: 0.5,
                            height: 0
                        },
                        b: {
                            fontSize: 18,
                            lineHeight: 35
                        },
                        per: {
                            color: '#eee',
                            backgroundColor: '#2E3E4E',
                            padding: [3, 5],
                            borderRadius: 3
                        }
                    }
                }
            },

formatter：定义了提示效果的显示格式
backgroundColor：定义了提示效果的背景色
borderColor：定义了提示效果的边框颜色
borderWidth：定义了提示效果的边框宽度
borderRadius：定义了提示效果的边框圆角角度
lineHeight：定义了提示效果的行间距

---

以上代码内容，是实现这个图表的关键代码，有兴趣的可以尝试自己动手试一试，也欢迎与我交流，互相学习，一起进步。

最终效果

系列课程 （您可以使用zqz-tutorial标签快速查看我发布的所有教程”）

使用echarts创建气泡图
使用echarts创建StepLine报表
使用echarts创建Punch Card报表
使用echarts创建可拖拽节点的图表
使用echarts创建自定义饼状图表
使用echarts创建点击增加节点的图表
使用echarts创建气温折线图
使用echarts创建折线图堆叠图表
使用echarts创建地图标注图表
使用echarts创建渐变色折线图
使用echarts创建X轴正负柱状图
使用echarts创建嵌套环形图

---

Posted on Utopian.io - Rewarding Open Source Contributors

---