Echarts的饼状图变成环形图

最新推荐文章于 2023-05-12 11:35:29 发布

VIP文章前端王小婷

最新推荐文章于 2023-05-12 11:35:29 发布

阅读量3.4k

点赞数 2

本文链接：https://blog.csdn.net/weixin_44763569/article/details/106060266

版权

首先实现一个饼状图


<!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>

        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

        <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

最低0.47元/天解锁文章

前端王小婷

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Echarts的饼状图变成环形图

首先实现一个饼状图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <scri
复制链接

扫一扫