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 += '';
                    for (var i = 0, l = axisData.length; i < l; i++) {
                        table += ''
                              + ''
                              + ''
                              + ''
                              + '';
                    }
                    table += '
时刻母线负荷(单位:兆瓦)挂接电源负荷(单位:兆瓦)
' + axisData[i] + '' + series[0].data[i] + '' + series[1].data[i] + '
'; 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] } ] };

 

你可能感兴趣的:(学习笔记,工作经验总结)