关于echarts的一些使用总结(饼图);

前几天刚刚入职 看到公司的项目 首页便是数据统计 上面贴了几个图表 大致是这样的

恩…. 好吧 这个肯定是要让我来改的 但是对于从来没有接触过图标的人来说 只好去看代码 终于找到了这样一句
< src=”plugins/echarts/build/dist/echarts.min.js”>
于是熟练的打开百度 输入echarts 一扇新世界的大门为我打开了

没过多久 我们的ui给我发了这样一张图

甜.. 甜甜圈
好吧 那就开始做吧 至少这个颜色比原来要好看很多 (也让人看起来很有食欲)
恩 先给我们的图留个空间 宽度33% 高度400px;
然后js
var myChart1 = echarts.init(document.getElementById(‘main1’));
下面声明我们的option(我个人理解就是图的样式 );
option={
noDataLoadingOption: {
text: ‘暂无数据’,
effect: ‘bubble’,
effectOption: {
effect: {
n: 0
}
}
},
tooltip: {
trigger: ‘item’,
formatter: “{a}
{b}: {c} ({d}%)”
},
stillShowZeroSum:true,
legend: {
orient: ‘horizontal’,
// orient: ‘vertical’,
itemWidth: 14,
itemHeight: 14,
x: ‘center’,
y:’bottom’,

                    data:['移动','电信','联通']
                },

                series: [
                    {
                        name:'订单统计',
                        type:'pie',
                        radius: ['30%', '50%'],
                        avoidLabelOverlap: false,                          
                        animationType:'scale',
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            }
                        },

                        labelLine: {
                            normal: {
                                show: true
                            }
                        },
                        data:[
                            {value:100, name:'移动',itemStyle: {
                                normal: {
                                shadow:true,
                                shadowBlur: 10,
                                shadowOffsetX:-5,
                                shadowColor: 'rgb(172,229,255)',
                                color: new echarts.graphic. LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(172,229,255,0.6)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(88,175,255,0.6)'
                                }]),
                                    }
                                }
                            },

                            {value:100, name:'联通',itemStyle: {
                                normal: {
                                shadow:true,
                                shadowBlur: 10,
                                shadowOffsetX:5,
                                shadowColor: 'rgb(255,184,42)',

                                color: new echarts.graphic. LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(255,184,42,0.6)'
                                }, {
                                    offset: 1, 
                                    color: 'rgba(255,113,0,0.6)'
                                }]),
                                    }
                                }
                            },

                            {value:100, name:'电信',itemStyle: {
                                normal: {
                                shadow:true,
                                shadowBlur: 10,
                                shadowOffsetY:5,
                                shadowColor: 'rgb(180,148,255)',
                                color: new echarts.graphic. LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(180,148,255,0.6)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(85,81,255,0.6)'
                                }]),
                                    }
                                }
                            },

                        ]
                    }
                ]
            },
这样基本的样式就出来了 
下面就是导入数据
调用ajax
(我用的比较笨的一种方法 取到数据之后分别给data中的value赋值 因为有9个数据)
$.ajax({
                url:"/Api/myTicket",
                type:"get",
                data:{"act":"day"},
                beforeSend: function(request) {
                  request.setRequestHeader("token",DXTX.utils.token);
                },
                success:function(msg){
                    var dataa = msg.data;
                    optiona[0].series[0].data[0].value=dataa[0];//移动
                    optiona[0].series[0].data[1].value=dataa[1];//电信
                    optiona[0].series[0].data[2].value=dataa[2];//联通
                    // 订单
                    optiona[1].series[0].data[0].value=dataa[3];//移动
                    optiona[1].series[0].data[1].value=dataa[4];//联通
                    optiona[1].series[0].data[2].value=dataa[5];//电信
                    //金额
                    optiona[2].series[0].data[0].value=dataa[6];//移动
                    optiona[2].series[0].data[1].value=dataa[7];//联通
                    optiona[2].series[0].data[2].value=dataa[8];//电信

                    myChart1.setOption(optiona[0]);
                    myChart2.setOption(optiona[1]);
                    myChart3.setOption(optiona[2]);
                },

            });
            这样图像就可以跟着数据进行更新了