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 += ' '
+ '' + axisData[i] + ' '
+ '' + series[0].data[i] + ' '
+ '' + series[1].data[i] + ' '
+ ' ';
}
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]
}
]
};