Echarts實戰案例代碼(3):餅圖pie之南丁格爾玫瑰圖rose實現代碼

在這裏插入圖片描述

var myChart = echarts.init(document.getElementById('echarts_2'));
        var option = {
            color: ["#a71a4f", "#bc1540", "#c71b1b", "#d93824", "#ce4018", "#d15122", "#e7741b", "#e58b3d", "#e59524", "#dc9e31", "#da9c2d", "#d2b130", "#bbd337", "#8cc13f", "#67b52d", "#53b440", "#48af54", "#479c7f", "#48a698", "#57868c"],
            tooltip: {
                trigger: 'item',
                formatter: "{b}  <br/>{c}萬元"
            },
            legend: {
                left: '3%',
                orient: 'vertical',
                type: "scroll",
                data: ["建設路街道", "長興路街道", "長社路街道", "金橋路街道", "和尚橋鎮", "坡胡鎮", "後河鎮", "石固鎮", "老城鎮", "南席鎮", "大周鎮", "董村鎮", "古橋鎮", "石象鎮", "佛耳湖鎮", "增福鎮"],
                icon: 'circle',
                textStyle: {
                    color: '#fff',
                }
            },
            calculable: true,
            series: [{
                name: '街道',
                type: 'pie',
                //startAngle: 0,
                //clockwise: false,
                radius: ["10%", "80%"],
                center: ['55%', '50%'],
                roseType: 'area',
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{c}萬元',
                    textStyle: {
                        fontWeight: 'bold',
                        fontFamily: 'Microsoft YaHei',
                        color: '#FAFAFA',
                        fontSize: 8
                    },
                },
                labelLine: {
                    show: true,
                    length: 0,
                    length2: 2,
                },
                data: [
                    {value: 600, name: '建設路街道'},
                    {value: 1100, name: '長興路街道'},
                    {value: 1200, name: '長社路街道'},
                    {value: 1300, name: '金橋路街道'},
                    {value: 1250, name: '和尚橋鎮'},
                    {value: 400, name: "坡胡鎮"},
                    {value: 680, name: "後河鎮"},
                    {value: 150, name: "老城鎮"},
                    {value: 470, name: "石固鎮"},
                    {value: 780, name: "南席鎮"},
                    {value: 680, name: "大周鎮"},
                    {value: 880, name: "董村鎮"},
                    {value: 1201, name: "古橋鎮"},
                    {value: 540, name: "石象鎮"},
                    {value: 960, name: "佛耳湖鎮"},
                    {value: 1280, name: "增福鎮"}
                ].sort(function (a, b) { return b.value - a.value;}),
            }]
        };

        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章