南丁格尔玫瑰图-修改扇形块的颜色与玫瑰图添加图片与文字

背景：1.依据要求给扇形图分配不同颜色

    2.在玫瑰图中间插入数字或图片

效果图：

如上一篇所述，首先要给图表一个具备宽高的容器；

HTML:

<div id="box" style="width: 700px;height: 400px;border:1px solid #e4e4e4;"></div>

先说扇形块的颜色分配，代码片段如下图

红色框内data是组成南丁格尔玫瑰图的数据；

黄色框内即是组成扇形模块的颜色，颜色将根据饼图的区域个数进行循环；

模块添加颜色之后；会发现显示数据的文字的颜色也随着改变；与扇形模块的颜色一致；因此需要对此进行设置；可以依据自己的要求统一修改文字颜色，代码如蓝框内容。

接下来简单说下饼图中间空白区域的文字与图片添加问题；

graphic 是原生图形元素组件。可以支持的图形元素包括： image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group，可以从echarts官网中配置项查阅到更加具体的内容。

图形元素为图片：（具体可以看注释喔~~）

最后贴上js的源码：

<script src="js/echarts.js"></script>
    <script>
        // 获取到这个DOM节点，然后初始化

        var myChart = echarts.init(document.getElementById("box"));
        var option={
            //标题
            title : {
                text: '南丁格尔玫瑰图',
                subtext: '纯属虚构',
                x:'center'         //标题的位置
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            //图例的位置与名称
            legend: {
                x : 'center',
                y : 'bottom',
                data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
            },
            //右上角工具栏
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            graphic:{            //echarts饼图中间放字
                type:'text',
                left:'center',
                top:'center',
                z:2,
			//  zlevel:10,
                style:{
                    text:'89',
                    textAlign:'center',
                    fill:'#000',
                    font:' 22px 微软雅黑 '
                },
            },
            series : [
                {
                    name:'面积模式',
                    type:'pie',
                    radius : [30, 110],
                    center : ['50%', '50%'], //图表的中心位于容器的相对位置
                    roseType : 'area',        //面积模式
                    itemStyle : {
                        normal: {

                            label: {                 //指示到模块的标签文字
                                show: true,
                                color:'black',
                                formatter: '{b} : {c} \n ({d}%)'
                            },
                            labelLine: {             //指示到模块的标签线
                                show: true,

                            }
                        },
                    },
                    color: ['#393939','#f5b031','#fad797','#59ccf7','#c3b4df','red','blue','pink'], //颜色将根据饼图的区域个数循环
                        data:[
                        {value:10, name:'rose1'},
                        {value:5, name:'rose2'},
                        {value:15, name:'rose3'},
                        {value:25, name:'rose4'},
                        {value:20, name:'rose5'},
                        {value:35, name:'rose6'},
                        {value:30, name:'rose7'},
                        {value:40, name:'rose8'}
                    ],

                }
            ]
        };
        myChart.setOption(option);

    </script>

欢迎补充~~