使用ECharts绘制南丁格尔图

1、先画饼图，主要是通过扇形的弧度表现不同类目的数据在总和中的占比。

只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要xAxis，yAxis。

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:800px;">ss</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        series:[
            {
                name: '视频APP访问人数统计',
                type: 'pie',
                radius: '55%',
                data: [
                    {value: 305, name: '优酷'},
                    {value: 145, name: '爱奇艺'},
                    {value: 585, name: '腾讯视频'},
                    {value: 300, name: '哔哩哔哩'},
                    {value: 195, name: '人人视频'}
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

此时，data一个包含 name 和 value 属性的对象 

南丁格尔图：在series中加上 

roseType: 'angle',z

注意使用 http://echarts.baidu.com/download.html中的源代码，防止内容不存在之内的错。

阴影配置

itemStyle: {
    // 阴影的大小
    shadowBlur: 200,
    // 阴影水平方向上的偏移
    shadowOffsetX: 0,
    // 阴影垂直方向上的偏移
    shadowOffsetY: 0,
    // 阴影颜色
    shadowColor: 'rgba(0, 0, 0, 0.5)'
}

itemStyle的emphasis是鼠标 hover 时候的高亮样式。

itemStyle: {
    emphasis: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

1、背景色是全局的，所以直接在 option 下设置 backgroundColor

2、文本的样式可以设置全局的 textStyle，也可以每个系列分别设置，每个系列的文本设置在 label.textStyle。

3、饼图的话还要将标签的视觉引导线的颜色设为浅色。

 labelLine: {
        normal: {
            lineStyle: {//将标签的视觉引导线的颜色设为浅色
                color: 'rgba(255, 255, 255, 0.3)'
            }
        }
    },
    itemStyle: {//阴影的配置,还可以设置扇形的颜色，在normal中编辑color来设置，设置后的扇形颜色是一样的
        normal: {
            // 阴影的大小
            shadowBlur: 200,
            // 阴影颜色
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }
}