echarts饼图南丁格尔玫瑰图属性设置

1、echarts中的图借助于canvas原理进行实现

2.在html中创建一块画布

<div id="main" style="width:600px;height: 400px;">

3.在js中先获取画布元素，初始化echarts;

var myChart = echarts.init(document.getElementById("main"));

4.设置一个变量，里面配置图表的相关信息。

  

 var option = {

   //title图的标题，副标题，以及位置设置

    title : {

        text: '南丁格尔玫瑰图',

        subtext: '纯属虚构',

        x:'center'

    },

    tooltip : {

        trigger: 'item',

        //提示框的数据样式显示

        formatter:"{a}<br/>占比名是{b}：{c} ({d}%) "

     

    },

    //图例相关内容的说明

    legend: {

        x : 'left',

        y : 'center',

        //图例的排列默认属性是：水平或垂直,默认是：水平

        orient:'vertical',

        data:['北京','上海','广州','福建','厦门','武汉','青岛','南京']

    },

    /*

     * toolbox为工具栏；提供导出图片，数据转化，动态数据等信息

     * 保存图片

     */

    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,//手柄拖拽调整选中的范围

    series : [

        {

            name:'半径模式',

            type:'pie',

            radius : [20, 110],

            center : ['25%', 200],

            roseType : 'radius',

            width: '40%',// for funnel

            max: 40,            // for funnel

            itemStyle : {

              //普通样式设置

                normal : {

                    label : {

                        show : false

                    },

                    labelLine : {

                        show : false

                    }

                },
                //高亮样式设置
                emphasis : {

                    label : {

                        show : true

                    },

                    labelLine : {

                        show : true

                    }

                }

            },

            data:[

                {value:10, name:'北京'},

                {value:5, name:'上海'},

                {value:15, name:'广州'},

                {value:25, name:'福建'},

                {value:20, name:'厦门'},

                {value:35, name:'武汉'},

                {value:30, name:'青岛'},

                {value:40, name:'南京'}

            ],

            color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#C0FF3E','#BDA29A','#C23531']

        },

        {

            name:'面积模式',

            type:'pie',

            radius : [30, 110],

            center : ['75%', 200],

            roseType : 'area',

            x: '50%',               // for funnel

            max: 40,                // for funnel

            sort : 'ascending',     // for funnel

            data:[

                {value:10, name:'北京'},

                {value:5, name:'上海'},

                {value:15, name:'广州'},

                {value:25, name:'福建'},

                {value:20, name:'厦门'},

                {value:35, name:'武汉'},

                {value:30, name:'青岛'},

                {value:40, name:'南京'}

            ]

        }

    ]

};

5.给myChart设置该属性

myChart.setOption(option);