百度Echarts的使用总结

在HTML写个空div

<div id="mainTL" style="height:100% ;width:100%;"></div>

JS中：

myChartTL = echarts.init(document.getElementById('mainTL'));

$(function(){
   // 指定图表的配置项和数据
    var optionTL = {
        title : {
            text : '案卷受理统计',
            // 居中
            x : 'center'
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            containLabel: true
        },
        tooltip : {
            // 提示框触发方式：trigger,坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
            trigger : 'axis'
        },
        legend : {
            // 靠右显示
            //x : 'right',
            y:'top',
            itemWidth:15,
            itemHeight:10,
            /*{
                name : '受理量',
                itemStyle  : {
                    color : 'CornflowerBlue'
                    //把 itemStyle变为textStyle 字体跟随图标颜色
                    //color : 'auto'
                }
            },*/
            data : [ '受理量', '办结量', '退件量', '超期量' ],
            orient : 'horizontal',
            top : 30
        },
        // 是否启用拖拽重计算特性，默认关闭(即值为false)
        calculable : true,
        xAxis : [ {

　　　　　 type : 'category',
　　　　　//数据过多时，想要显示全部时需要加上如下属性
　　　　　　　　axisLabel:{
　　　　　　　　　　interval: 0,
　　　　　　　　　　//字体斜向显示
　　　　　　　　　　rotate:30
},

data : []

        } ],
        //yAxis : {},
        yAxis : [{
             //type: 'category',
             type: 'value'
             //splitNumber   :5
　　　　　　　　//最小单位刻度为1

　　　　　　　　minInterval: 1,

　　　　　　　　　//最大值
　　　　　　　　 max:max

}],

        series : []
    };
    //ajax加载之前先显示一段简单的loading动画
    myChartTL.showLoading();    
    //ajax加载成功之后隐藏loading动画
    myChartTL.hideLoading();

    // 使用刚指定的配置项和数据显示图表。
    myChartTL.setOption(optionTL);  
}

图标自适应窗口

    //窗口自适应
    $(window).resize(function() {  
        myChartTL.resize();
    }).resize();

百度Echarts的使用总结

猜你喜欢