Echarts3 使用及遇到问题总结

1、Echarts随着浏览器窗口大小调整图形

//当浏览器大小变化时，Echart重新调整
$(window).resize(function () {
     this.EChart.resize();
});

2、Echarts点击事件调用N次问题（其他事件通用）

//防止点击事件调用n次
if(myChart){
    //清除画布
    myChart.clear();
}
//重新加载图形
myChart = myChart.setOption(option,true);
//清除点击事件
myChart.off('click');
//创建监听点击事件
myChart.on('click', function (params) {
    console.log(params);
});

3、屏蔽默认右键属性(默认的右击事件，保存图片等)

var dom = document.getElementById("div_id");
dom.oncontextmenu = function() { return false; };

4、绘制Demo

/** 折线图  **/
var option = {
  animation : true,//是否去掉动画效果，默认开启动画效果(缺省值：true)，针对在导出图片时使用，否则无法导出完整图片
    title: {
        text: '本期电量'
    },
    tooltip: {
        trigger: 'axis'
    },
    color : colors,
    grid: {
        left: '3%',//面板左侧留白
        right: '4%',//面板右侧留白
        bottom: '15%',//面板下侧留白
        //top : '50%',//面板上侧留白
        containLabel: true
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView: {
                readOnly: true,
                title: busName + '与挂接电源负荷对比数据表',  
                optionToContent : function(opt) {
                    var axisData = opt.xAxis[0].data;
                    var series = opt.series;
                    var table = '<table style="width:100%;text-align:center"><thead><tr>'
                                 + '<td class=\'biaodan-top\'>时刻</td>'
                                 + '<td class=\'biaodan-top\'>母线负荷(单位：兆瓦)</td>'
                                 + '<td class=\'biaodan-top\'>挂接电源负荷(单位：兆瓦)</td>'
                                 + '</tr>';
                    table += '</thead><tbody><tr>';
                    for (var i = 0, l = axisData.length; i < l; i++) {
                        table += '<tr>'
                              + '<td class=\'biaodan-q\' align=\'left\'>' + axisData[i] + '</td>'
                              + '<td class=\'biaodan-q\' align=\'right\' >' + series[0].data[i] + '</td>'
                              + '<td class=\'biaodan-q\' align=\'right\' >' + series[1].data[i] + '</td>'
                              + '</tr>';
                    }
                    table += '</tbody></table>';
                    return table;
                }
            },
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    xAxis: {
        type: 'category',
        axisLabel: {
            interval : 0,//强制显示所有横坐标，1就是隔一个显示，2就是隔两个显示....以此类推
            formatter:function(value)//格式化横坐标显示，数据过长时使用
            {
                debugger  //启用浏览器调试
                var ret = "";//拼接加\n返回的类目项  
                var maxLength = 2;//每项显示文字个数  
                var valLength = value.length;//X轴类目项的文字个数  
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                if (rowN > 1)//如果类目项的文字大于3,  
                {  
                    for (var i = 0; i < rowN; i++) {  
                        var temp = "";//每次截取的字符串  
                        var start = i * maxLength;//开始截取的位置  
                        var end = start + maxLength;//结束截取的位置  
                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                        temp = value.substring(start, end) + "\n";  
                        ret += temp; //凭借最终的字符串  
                    }  
                    return ret;  
                }  
                else {  
                    return value;  
                }  
            }
            //rotate:45  //如果横坐标不过长，可以采用此方式，倾斜45度
        },
        boundaryGap: true //不从0刻度开始，false 从0刻度开始
        //data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'category',
        type: 'value',
    scale:true//自适应
    },
    series: [
        {
            name:'电量',
            type:'line'
            //data:[120, 132, 101, 134, 90, 230, 210]
        }
    ]
};