echarts之饼图（2）---玫瑰饼图

PS相关学习资料链接：Pink老师的教程分解

效果：

1.html结构

<div class="pannel rose">
   <h2>玫瑰饼图</h2>
   <div class="chart">
       
   </div>
</div>

2.css自行设置chart位置的宽和高
3.js逻辑：

//玫瑰饼图
(function() {
    var myChart = echarts.init(document.querySelector(".rose .chart"));

    var option = {
        color: [
            "#065aab",
            "#066eab",
            "#0682ab",
            "#0696ab",
            "#06a0ab",
        ],
        tooltip: {
            trigger: 'item', //类目触发，axis是坐标轴触发
            formatter: '{a}<br />{b}:{c}({d}%)'
                //a:年龄分布:series里的name
                //b:搜索引擎：series里的data的name
                //c:1048：series里的data的value
                //d:自己换算的百分数
        },
        legend: {
            // 距离底部为0%
            bottom: "0%",
            // 小图标的宽度和高度
            itemWidth: 10,
            itemHeight: 10,
            textStyle: { //图例文字的样式
                color: 'rgba(255, 255, 255, 0.5)'
            }

        },
        series: [{
            name: '地区分布',
            type: 'pie',
            // 设置饼形图在容器中的位置           
            center: ["50%", "50%"],
            //内圆半径和外圆半径
            radius: ['10%', '60%'],
            roseType: "radius", //饼形图的显示模式:半径模式
            avoidLabelOverlap: false,
            //显示标签文字
            label: {
                show: true,
                // color: 'rgba(255, 255, 255, 0.5)',
                fontSize: '15',

            },
            // 显示连接线(图形和文字之间的线)
            labelLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.5)'
                },
                smooth: 0.2,
                //以下两个指线的长度
                length: 10, //连接扇形图线长
                length2: 20 //连接文字线长
            },
            data: [
                { value: 1048, name: '西安' },
                { value: 735, name: '深圳' },
                { value: 580, name: '杭州' },
                { value: 484, name: '安康' },
                { value: 300, name: '上海' }
            ]
        }]
    };
    myChart.setOption(option);

    //4让图表跟随屏幕自适应
    window.addEventListener("resize", function() {
        myChart.resize();
    });

})();