echarts图表使用心得

legend：图例名称，    seriesDataArr：显示的数据类型，类型为[value : ' ',name : ' ',datas : []  ]

datas是用于悬浮提示框显示的数据，详情见有关parameter参数的echarts图表笔记

xAxisData：x轴显示的数据

 

initOilsReport: function(legend, seriesDataArr, xAxisData,id){
                reportTrend = echarts.init(document.getElementById(id), 'wonderland');
                var option = {
                        color: ['#1ab394', '#f8ac59', '#f58db2', '#41b9dc', '#ed5565', '#be75c6'],
                        tooltip : {
                            confine:true,
                            enterable:true,
                            trigger : 'axis',
                            axisPointer : { // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                            },
                            formatter : function(params){
                                var barData=[],lineData=[];
                                var res  =  params[0].name;
                                res += '<style>td{padding:5px;}</style><table>';
                                res += '<tr><td>名称</td><td>挂牌金额</td>';
                                res += '<td>实付</td><td>优惠</td><td>升数</td><td>笔数</td></tr>';
                                //将列信息和总合计分为不同数组存储
                                for(var i=0;i<params.length;i++){
                                    if(params[i].seriesType==="bar")
                                        barData.push(params[i]);
                                    else
                                        lineData.push(params[i]);    
                                }
                                //表格行信息
                                for(var i=0;i<barData.length;i++){
                                    if(barData[i].value!=0||barData[i].data.datas[0]!=0||barData[i].data.datas[1]!=0||barData[i].data.datas[2]!=0||barData[i].data.datas[3]!=0)
                                        res += '<tr><td>'+barData[i].seriesName+'</td><td>'+barData[i].value;
                                    for(var j=0;j<barData[i].data.datas.length;j++){
                                        if(barData[i].value!=0||barData[i].data.datas[0]!=0||barData[i].data.datas[1]!=0||barData[i].data.datas[2]!=0||barData[i].data.datas[3]!=0)
                                            res += '</td><td>'+barData[i].data.datas[j];
                                    }
                                    res += '</td></tr>';
                                }
                                //表格总合计
                                for(var i=0;i<lineData.length;i++){
                                    if(lineData[i].value!=0||lineData[i].data.datas[0]!=0||lineData[i].data.datas[1]!=0||lineData[i].data.datas[2]!=0||lineData[i].data.datas[3]!=0)
                                        res += '<tr><td>合计</td>';
                                    for(var j=0;j<lineData[i].data.datas.length;j++){
                                        if(lineData[i].value!=0||lineData[i].data.datas[0]!=0||lineData[i].data.datas[1]!=0||lineData[i].data.datas[2]!=0||lineData[i].data.datas[3]!=0)
                                            res += '<td>'+lineData[i].data.datas[j]+'</td>';
                                    }
                                    if(lineData[i].value!=0||lineData[i].data.datas[0]!=0||lineData[i].data.datas[1]!=0||lineData[i].data.datas[2]!=0||lineData[i].data.datas[3]!=0)
                                        res +='<td>'+lineData[i].value+'</td></tr>';
                                }
                                res += '</table>';
                                return res;
                            }
                        },
                        grid : {
                            left : '3%',
                            right : '4%',
                            top : '10%',
                            bottom : '3%',
                            containLabel : true
                        },
                        legend: {//图例事件
                            type: 'scroll',//当图例过多时，是否采用滚动显示，只针对3.7以上版本才有用
                            orient: 'horizontal',//图例是横向还是纵向摆放
                            right : '15%',//图例位置
                            left:'15%',
                            data:legend//显示的图例数据
                        },
                        xAxis : [ {
                            type : 'category',
                            axisLabel:{  //将x轴所有的数据进行显示，当x轴数据显示不全时可采用此方法
                                interval:0
                            },
                            data : xAxisData
                        }],
                        yAxis : [{
                            type: 'value',
                            name: '挂牌金额/元',
                            position: 'left',
                            axisLabel: { formatter: '{value}' }
                        },{
                            type: 'value',
                            name: '交易笔数/笔',
                            position: 'right',
                            axisLabel: { formatter: '{value}' }
                        }],
                        dataZoom: [{  //x坐标轴采用滚动形式，当x轴数据过多可采用滑动形式进行查看
                            type: 'inside',
                            start: 0,//x轴开始滑动的位置。单位是百分比
                            end: 100//x轴结束滑动的位置，我采用100%，这样，直接先全部显示出来，若需要详细信息可进行滑动查看
                        }, {
                            start: 0,
                            end: 100,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',//官方固定值，我也不懂啥意思
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        series : seriesDataArr
                };
                /*
                 * 清图表缓存
                 */
                //使用刚指定的配置项和数据显示图表。
                reportTrend.setOption(option,true);
                //清空画布，防止缓存
                reportTrend.clear();
                reportTrend.setOption(option,true);
            },