echarts 饼状图实例

1
<div id="container" style=" width: 30%; height: 70%;float: left;"></div>

1
var myChart = echarts.init(document.getElementById('container'));

1
copy(myChart,year);

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
 //从数据库读取数据赋值给echarts饼状图
    function copy(myChart,year) {
        $.ajax({
            url : "${ctx}/_data/vr/sell/findByBreed",
            type : "post",
            data : {
                year:year
            },
            traditional : true, //这里设置为true,将自动生成的[]符号去除
            dataType : "json",
            success : function(data) {
                if (data.length == 0) {
                    var option = {
                        title : {
                            text : "当年销售分析图"
                        },
                        series : [ {
                            name : "品种",
                            type : 'pie',
                            radius : '60%',
                            data : [ {
                                value : 0,
                                name : '无'
                            }, ]
                        } ]
                    };
                    myChart.setOption(option);
                } else {
                    //创建一个数组，用来装对象传给series.data，因为series.data里面不能直接写for循环
                    var servicedata = [];
                    var type = [];
                    var sum = 0.00;
                    var price = [];
                    for (var i = 0; i < data.length; i++) {
                        var obj = new Object();
                        obj.name = data[i].name;
                        obj.value = data[i].count;
                        obj.avg = data[i].avg;
                        servicedata[i] = obj;
                        type[i] = data[i].name;
                        price[i] = data[i].avg.toFixed(4);
                        sum = sum + parseFloat(data[i].count);
                    }
                    for (var i = 0; i < servicedata.length; i++) {
                        if (servicedata[i].value == 0) {
                            servicedata.splice(i, 1);
                            i--;
                        }
                    }
                    myChart.setOption({
                        title : {
                            text : "当年销售分析图",
                            x : 'center'
                        },
                        tooltip : {
                            trigger : 'item',
//默认formatter : "{a} <br/>{b} : {c} ({d}%)"
                            formatter : function(param) {
                                var dataIndex = param.dataIndex;
                                var edit = "品种:" + "<br>";
                                edit += servicedata[dataIndex].name + ": " + servicedata[dataIndex].value + " 吨   " + "(" +
                                    parseFloat(servicedata[dataIndex].value / sum).toFixed(2) + "%" + ")" + "<br>"
                                    + servicedata[dataIndex].name + "均价: " + price[dataIndex] + " 元";
                                return edit;
                            }
                        },
                        color : [ '#6dd8da', '#b6a2de', '#58afed', '#F3D7B5', '#98FB98', '#FFA500',
                            '#E9967A', '#808080', '#F0E68C', '#DB7093', '#9ACD32' ],
                        legend : {
                            orient : 'vertical',
                            left : 'right',
                            data : type
                        },
                        series : [ {
                            name : "品种",
                            type : 'pie',
                            radius : '60%',
                            data : servicedata
                        } ]
                    });
                }
            }
        });
    }

1
2
3
if (myChart != null && myChart != "" && myChart != undefined) {
            myChart.dispose();
        }