百度Echarts的使用总结

Posted 2020-11-01 gaomanito

在html写个空div

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

 

JS中：

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

$(function(){
   // 指定图表的配置项和数据
    var optionTL = {
        title : {
            text : ‘案卷受理统计‘,

　　　　　　　　top : 20,
　　　　　　　　textStyle:{
　　　　　　　　　　color:‘#fff‘,
　　　　　　　　　　fontSize:20
　　　　　　　　},
　　　　　　　　// 居中

            x : ‘center‘
        },

　　　　　　areaStyle:{
　　　　　　　　normal:{
　　　　　　　　　　//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
　　　　　　　　　　color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
　　　　　　　　　　offset: 0,
　　　　　　　　　　color: ‘rgba(255,234,0,0.96)‘
　　　　　　　　　　}, {
　　　　　　　　　　offset: .54,
　　　　　　　　　　color: ‘rgba(255,234,0,0.36)‘
　　　　　　　　　　},{
　　　　　　　　　　offset: 1,
　　　　　　　　　　color: ‘rgba(255,234,0,0.0)‘
　　　　　　　　　  }])

　　　　　　　　}
　　　　　　},

        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‘,

　　　　　　　　//留白策略
　　　　　　　　boundaryGap : false,
　　　　　　　　axisLine:{
　　　　　　　　　　lineStyle:{
　　　　　　　　　　　　color:‘#fff‘
　　　　　　　　　　}
　　　　　　　　},

　　　　　　　　//去掉中间的分割线
　　　　　　　　splitLine:{
　　　　　　　　　　show:false
　　　　　　　　},

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

　　　　　　　　　　textStyle : {
　　　　　　　　　　　　fontSize:14
　　　　　　　　　　}

             },

            data : []

        } ],
        //yAxis : {},
        yAxis : [{
             //type: ‘category‘,
             type: ‘value‘
             //splitNumber   :5

　　　　　　　　 axisLine:{
　　　　　　　　　　 lineStyle:{
　　　　　　　　　　　　color:‘#fff‘
　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　axisLabel : {
　　　　　　　　　　textStyle : {
　　　　　　　　　　　　fontSize:14
　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　//去掉中间的分割线
　　　　　　　　splitLine:{
　　　　　　　　　　show:false
　　　　　　　　}

　　　　　　　　//最小单位刻度为1

　　　　　　　  　minInterval: 1,

　　　　　　　　　//最大值
　　　　　　　　  max:max

         }],

        series : [{　　　

　　　　　　name:‘受理量‘,
　　　　　　type:‘bar‘,
　　　　　　//调整柱子宽度
　　　　　　barWidth:20,

　　　　　　data:data

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

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

 

图标自适应窗口

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