echarts如何画饼图

84 阅读 0 评论 56 点赞

我是靠谱客的博主包容钢笔，这篇文章主要介绍echarts如何画饼图，现在分享给大家，希望可以做个参考。

首先从echarts官网上下载echarts.js文件

复制代码

1
<script src="echarts.js"></script>

复制代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery1.3.2.min.js"></script>
    <script src="echarts.js"></script>
</head>
<body>
<div id="product2" style="width: 30%;height: 300px;"></div>
<script>
    $(function(){
        var datalist = [];
        $.ajax({
            type:'GET',
            url:'test.json',
            dataType:'json',
            success:function(res){
                datalist = res;
                //产品的名称、数量、单价分别提取出来作为三个新数组
                var namelist = [];
                var countlist = [];
                var pricelist = [];
                $.each(datalist,function(index,val){
                    namelist.push(val.name);
                    countlist.push(val.counts);
                    pricelist.push(val.price);
                });

/*
                 * 饼图 产品数量占比
                 */
                var productChart2 = echarts.init(document.querySelector('#product2'));
                var option2 = {
                    title:{
                        text:'product -- 饼图',
                        textStyle:{fontSize:14}
                    },
                    tooltip:{},
                    legend:{
                        data:namelist,//顶部提示分类有哪些对应的是什么颜色、以及顶部提示的位置
                        x: 'right',// 'center' | 'left' | {number}
                        y: 'top'// 'center' | 'bottom' | {number}
                    },
                    /*xAxis:{},//饼图没有x,y轴
                    yAxis:{},*/
                    color:['#cff','#cfc','#fcf','#fcc','#ccf'],
                    series:{
                        type:'pie',
                        radius : ['40%', '66%'],//环状的饼图（如果不要这个参数，那就是一个实心圆，按自己需求取舍）
                        center : ['30%', '50%'],//图形在product2的div中的位置
                        itemStyle:{
                            normal: {
                                label:{   //饼图每个分类的解释
                                    show:true,
                                    formatter:'{b}:{c} ({d}%)'
                                }
                            }
                        },
                        lableLine: {normal: {show: true}},
                        emphasis: {   //解释（即每个模块延伸出的文字和占比）的位置和样式
                            label: {
                                show: true,
                                formatter: "{b}n{c} ({d}%)",
                                position: 'center',
                                textStyle: {
                                    fontSize: '12',
                                    fontWeight: '300'
                                }
                            }
                        },
                        data:[//绘制的是数量占比，所以这里的value指的是数量
                            {value:'12',name:'apple'},
                            {value:'20',name:'banana'},
                            {value:'69',name:'egg'},
                            {value:'100',name:'pencil'},
                            {value:'52',name:'rice'}
                        ]
                    }
                };
                // 使用刚指定的配置项和数据显示图表。
                productChart2.setOption(option2);
                window.onresize = function(){
                    productChart2.resize();  //使图表适应
                };
            }
        });
    })
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery1.3.2.min.js"></script>
    <script src="echarts.js"></script>
</head>
<body>
<div id="product2" style="width: 30%;height: 300px;"></div><!--饼图容器-->
<script>
    $(function(){
        var datalist = [];
        $.ajax({
            type:'GET',
            url:'test.json',
            dataType:'json',
            success:function(res){
                datalist = res;
                //产品的名称、数量、单价分别提取出来作为三个新数组
                var namelist = [];
                var countlist = [];
                var pricelist = [];
                $.each(datalist,function(index,val){
                    namelist.push(val.name);
                    countlist.push(val.counts);
                    pricelist.push(val.price);
                });          

                /*
                 * 饼图 产品数量占比
                 */
                var productChart2 = echarts.init(document.querySelector('#product2'));
                var option2 = {
                    title:{
                        text:'product -- 饼图',
                        textStyle:{fontSize:14}
                    },
                    tooltip:{},
                    legend:{
                        data:namelist,//顶部提示分类有哪些对应的是什么颜色、以及顶部提示的位置
                        x: 'right',// 'center' | 'left' | {number}
                        y: 'top'// 'center' | 'bottom' | {number}
                    },
                    /*xAxis:{},//饼图没有x,y轴
                    yAxis:{},*/
                    color:['#cff','#cfc','#fcf','#fcc','#ccf'],
                    series:{
                        type:'pie',
                        radius : ['40%', '66%'],//环状的饼图（如果不要这个参数，那就是一个实心圆，按自己需求取舍）
                        center : ['30%', '50%'],//图形在product2的div中的位置
                        itemStyle:{
                            normal: {
                                label:{   //饼图每个分类的解释
                                    show:true,
                                    formatter:'{b}:{c} ({d}%)'
                                }
                            }
                        },
                        lableLine: {normal: {show: true}},
                        emphasis: {   //解释（即每个模块延伸出的文字和占比）的位置和样式
                            label: {
                                show: true,
                                formatter: "{b}n{c} ({d}%)",
                                position: 'center',
                                textStyle: {
                                    fontSize: '12',
                                    fontWeight: '300'
                                }
                            }
                        },
                        data:[//绘制的是数量占比，所以这里的value指的是数量
                            {value:'12',name:'apple'},
                            {value:'20',name:'banana'},
                            {value:'69',name:'egg'},
                            {value:'100',name:'pencil'},
                            {value:'52',name:'rice'}
                        ]
                    }
                };
                // 使用刚指定的配置项和数据显示图表。
                productChart2.setOption(option2);
                window.onresize = function(){
                    productChart2.resize();  //使图表适应
                };
            }
        });
    })
</script>
</body>
</html>

json文件：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[{
  "name": "apple",
  "counts": "12",
  "price": "10"
},
  {
    "name": "banana",
    "counts": "20",
    "price": "20"
  },
  {
    "name": "egg",
    "counts": "69",
    "price": "17"
  },
  {
    "name": "pencil",
    "counts": "100",
    "price": "6"
  },
  {
    "name": "rice",
    "counts": "52",
    "price": "8"
  }
]