Echart使用笔记

一、 registerTheme
注册主题,用于初始化实例的时候指定。
Echart官网主题下载:  http://echarts.baidu.com/download-theme.html
最好的办法是定制主题,然后修改里面的选项
 
使用方法
echarts.init(dom,theme)
el: echarts.init($(selector)[0], 'schoolReport');
 
二、 resize
改变图表尺寸,在容器大小发生改变时需要手动调用。
Tip: 有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用 resize 方法获取正确的高宽并且刷新画布,或者在 opts 中显示指定图表高宽。
 
el:比如两个标签页公用一个图表,在一个标签页宽高发生变化后,调用此方法重置容器大小
$(selector)[0].style.height = yAxis.length * 50 + "px";
myChart.clear();
myChart.resize();
myChart.setOption(option);
 
 
三、 on &   off
绑定 & 解绑事件处理函数。
 
el:图表公用的时候,一定要调用off之后在绑定时间,否则事件触发越来越多
myChart.off("click");
myChart.on('click', function (param) {
    if (param) {
        callback(param.dataIndex, param.name);
    }
});
 
四、  yAxis.axisLabel. interval
坐标轴刻度标签的显示间隔,在类目轴中有效。 默认会采用标签不重叠的策略间隔显示标签。
 
el:当X\Y轴数据过长时,会隐藏一部分X\Y轴的名称,而隔几个显示, 可以设置成 0 强制显示所有标签。
yAxis: {
    type: 'category',
    axisLabel:{
        interval: 0
    },
    data: yAxis
},
 
五、  tooltip.position
提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。
 
el:随着鼠标的位置移动,并在鼠标的右下15
tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器,坐标轴触发有效
        type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
    },
    position: function (point, params, dom, rect, size) { //point: 鼠标位置
        // 固定在顶部
        return [point[0] + 15, point[1] + 15];
    }
},
 
六、 tooltip.formatter
提示框浮层内容格式器,支持字符串模板和回调函数两种形式。
 
tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器,坐标轴触发有效
        type: 'line' // 默认为直线,可选为:'line' | 'shadow'
    },
    formatter: "{b} : {c} 次"
},
 

猜你喜欢

转载自www.cnblogs.com/sanqianjin/p/9554528.html
今日推荐