echarts 应用 （柱状图，扇形图）

2019独角兽企业重金招聘Python工程师标准>>>

/*************jsp<div>分配足够空间**********/

<div id="graph1" style="width: 100%;height:200px;"></div>

/**********************加载状态**********************/

        myChart = echarts.init(document.getElementById('graph1'));

        myChart.showLoading({
            text: "图表数据正在努力加载..."
        });  // 这里的代码 在页面完全加载完前（包括AJAX数据没返回前）就跟不执行一样
// 指定图表的配置项和数据

/*************************柱状图**********************/

var option = {
                    title: {
                        text: "全省"+monthScopeValue+"月份商品住房按交易套型面积分类汇总",
                        x: 'center',
                        textStyle:{
                            fontSize:'14'
                        }
                    },
                    tooltip: {},
                    legend: {
                        data:arraymjqj,
                         x: 'right',
                         padding:30
                    },
                    xAxis: {
                        data: arrayYf,
                        splitLine : false,
                        axisLabel : {
                            interval : 0,/********间距为0***************/
                            //rotate : 45,
                            textStyle : {
                                fontSize : 12
                            }
                        }
                    },
                    yAxis: {
                         name:'单位（套）',
                        type : 'value'
                    },
                    series: function(){
                        var serie=[];
                        for(var i=0;i<arraymjqj.length;i++){
                            var item={
                                    name:arraymjqj[i],
                                    type:'bar',
                                    data:arraytaoshu[i]
                            };
                            serie.push(item);
                        }
                        return serie;
                    }(),
                    color : ['#09C705','#0190F0','#8659BE']
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                myChart.hideLoading();

 

/****************************扇形****************************/

        title : {
                            text: "全省"+monthScopeValue+"月份商品住房按交易套型面积分类占比",
                            x:'center',
                            textStyle:{
                                fontSize:'14'
                            }
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'right',
                            data: arraymjqj,
                            padding:30
                        },
                        series : [
                                  {
                                      name: '',
                                      type: 'pie',
                                      radius : '55%',
                                      center: ['50%', '60%'],
                                      data:    function(){
                                        var serie=[];
                                          for(var i=0;i<arraymjqj.length;i++){
                                            var item={
                                                    name:arraymjqj[i],
                                                    value:zfTaoshu[i]
                                            };
                                            serie.push(item);
                                        }
                                        return serie;
                                      }(),
                                      itemStyle:{
                                          normal:{
                                                label:{
                                                  show: true,
                                                  formatter: '{d}%'
                                                },
                                                labelLine :{show:true}
                                              }
                                          }
                                     
                                  }
                              ],
                                color : ['#09C705','#0190F0','#8659BE']
                    };
                myLineChart.setOption(optionbfb);
                myLineChart.hideLoading();

转载于:https://my.oschina.net/maoguangdong/blog/700011