Echarts的饼状图变成环形图

末蓝、 2022-12-23 00:49 273阅读 0赞

首先实现一个饼状图

<!DOCTYPE html>
    
    <html>
    
        <head>
    
            <meta charset="UTF-8">
    
            <title></title>
    
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    
            <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
    
        </head>
    
        <body>
    
            
    
            <div id="main" class="col-md-12  col-sm-12 col-xs-12" style="height: 400px;"></div>
    
            <script>
    
                //基于准备好的dom，初始化echarts实例
    
                var cChart = echarts.init(document.getElementById('main'));
    
                var names = []; //类别数组(用于存放饼图的类别)
    
                var brower = [];
    
                $.ajax({
    
                    type: 'get',
    
                    url: "data.json",
    
                    dataType: "json", //返回数据形式为json
    
                    success: function(data) {
    
                        //请求成功时执行该函数内容，result即为服务器返回的json对象
    
                        $.each(data.list, function(index, item) {
    
                            names.push(item.value); //挨个取出类别并填入类别数组
    
                            brower.push({
    
                                name: item.value,
    
                                value: item.name
    
                            });
    
                        });
    
                        cChart.setOption({ //加载数据图表           
    
                            title: {
    
                                text: '每日睡眠分布',
    
                                // subtext:'',
    
                                x: 'center',
    
                                y: '7px',
    
                                textStyle: { //图例文字的样式
    
                                    color: '#3A7BD5',
    
                                    fontSize: 16
    
                                },
    
                                textAlign: 'left'
    
                            },
    
                            legend: {
    
    
    
                                textStyle: { //图例文字的样式
    
                                    color: '#fff',
    
                                    fontSize: 12
    
                                },
    
                                type: 'scroll',
    
                                orient: 'vertical',
    
                                right: 10,
    
                                top: 20,
    
                                bottom: 20,
    
                                data: names
    
                            },
    
                            series: [{
    
                                name: '姓名',
    
                                type: 'pie',
    
                                radius: '55%',
    
                                center: ['40%', '50%'],
    
                                data: brower,
    
                                itemStyle: {
    
                                    emphasis: {
    
                                        shadowBlur: 10,
    
                                        shadowOffsetX: 0,
    
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
    
                                    },
    
                                    normal: {
    
                                        color: function(params) {
    
                                            //自定义颜色
    
                                            var colorList = ['#2059be', '#198577',
    
                                                '#a8674e'
    
                                            ];
    
                                            return colorList[params.dataIndex]
    
                                        }
    
                                    }
    
                                }
    
                            }]
    
                        });
    
                    },
    
                    error: function(errorMsg) {
    
                        //请求失败时执行该函数
    
                        alert("图表请求数据失败!");
    
                    }
    
                });
    
            </script>
    
        </body>
    
    </html>

json模拟数据

{"list":[{"value":"管理","name":40},
    {"value":"管理","name":140},
    {"value":"操作工","name":31}]}

![dd8447ad53489d938624b3f1393246ed.png][]

讲饼状图变成一个环形图  
关键在于这个属性

radius: ['40%', '50%'],

![38436a2175d31007f48214610b0f8dfb.png][]

参考代码如下：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
        </head>
        <body>
            
            <div id="main" class="col-md-12  col-sm-12 col-xs-12" style="height: 400px;"></div>
            <script>
                //基于准备好的dom，初始化echarts实例
                var cChart = echarts.init(document.getElementById('main'));
                var names = []; //类别数组(用于存放饼图的类别)
                var brower = [];
                $.ajax({
                    type: 'get',
                    url: "data.json",
                    dataType: "json", //返回数据形式为json
                    success: function(data) {
                        //请求成功时执行该函数内容，result即为服务器返回的json对象
                        $.each(data.list, function(index, item) {
                            names.push(item.value); //挨个取出类别并填入类别数组 
                            brower.push({
                                name: item.value,
                                value: item.name
                            });
                        });
                        cChart.setOption({ //加载数据图表            
                            title: {
                                text: '每日睡眠分布',
                                // subtext:'',
                                x: 'center',
                                y: '7px',
                                textStyle: { //图例文字的样式
                                    color: '#3A7BD5',
                                    fontSize: 16
                                },
                                textAlign: 'left'
                            },
                            legend: {
                                
                                textStyle: { //图例文字的样式
                                    color: '#fff',
                                    fontSize: 12
                                },
                                type: 'scroll',
                                orient: 'vertical',
                                right: 10,
                                top: 20,
                                bottom: 20,
                                data: names
                            },
                            series: [{
                                name: '姓名',
                                type: 'pie',
                                radius: ['40%', '50%'],                         
                                data: brower,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    },
                                    normal: {
                                        color: function(params) {
                                            //自定义颜色
                                            var colorList = ['#2059be', '#198577',
                                                '#a8674e'
                                            ];
                                            return colorList[params.dataIndex]
                                        }
                                    }
                                }
    
                            }]
                        });
                    },
                    error: function(errorMsg) {
                        //请求失败时执行该函数
                        alert("图表请求数据失败!");
                    }
                });
            </script>
        </body>
    </html>

data.json模拟数据

{"list":[{"value":"管理","name":40},
    {"value":"管理","name":140},
    {"value":"操作工","name":31}]}

ok,变成了环形图了。

![d483a8746255cd17df377a4ba0ed0ec4.png][]

[dd8447ad53489d938624b3f1393246ed.png]: /images/20221120/6783ac6072174f20addec5743d53e984.png
[38436a2175d31007f48214610b0f8dfb.png]: /images/20221120/54ac3de002b14c70ad26fc0d433ee3f5.png
[d483a8746255cd17df377a4ba0ed0ec4.png]: /images/20221120/0333151c1e35476f83df90eb7d72e707.png