echart异步刷新图表,详细配置注释

Posted AiTing on the way

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echart异步刷新图表,详细配置注释相关的知识,希望对你有一定的参考价值。

  echarts刷新技巧:

    echartData.chear();  //当异步改变数据时,配合echartData .setOption(option)才会有动画效果

    echartData.resize();  //当选项卡与echarts一起时,会出现图标宽度不适应,使用resize())即可完美解决

 

效果预览:

 

直接上代码:(用之前务必要引入echart.js插件)

 

<body>
    <!-- 数据选择 -->
    <ul class="tab_menu clearfix">
        <li id="week_data" class="active">7天</li>
        <li id="month_data" >30天</li>
        <li id="time_sec" class="time_box"><input class="form-control" value="选择时间"></li>
    </ul>

    <!-- 数据展示 -->
    <div class="chart_show">
        <ul class="chart_menu clearfix">
            <li class="active">转化与用户</li>
            <li>登录与购买</li>
        </ul>
        <ul class="chart_list">
            <li class="active">
                <div class="chart_box clearfix">
                    <div class="col-xs-6">
                        <div id="chart_box" style="width: 100%;height:400px;margin:0 auto;"></div>
                    </div>
                    <div class="col-xs-6"></div>
                </div>
            </li>
            <li>
                22222
            </li>
        </ul>
    </div>
  </div>

  <script src="js/user.js"></script>
  <script>
    $(function(){
        //页面初始化时加载图表
        mychart1(\'week\');

        $("#week_data").on(\'click\',function(){
            //alert(\'请求7天数据\');
            myChart1.clear();            //清空原来的图表
            mychart1(\'week\');  //重新加载图表,之前必须要清空原来的,否则没有动画效果
        });
        $("#month_data").on(\'click\',function(){
            //alert(\'请求30天数据\');
            myChart1.clear();            //清空原来的图表
            mychart1(\'month\');   //重新加载图表,之前必须要清空原来的,否则没有动画效果
        });
        $("#time_sec").on(\'click\',function(){
            //alert(\'请求时间段的数据\');
            myChart1.clear();            //清空原来的图表
            mychart1(\'time_sec\');   //重新加载图表,之前必须要清空原来的,否则没有动画效果
        });
        
    })

  </script>
</body>

 

 

js函数:

// 基于准备好的dom,初始化echarts实例
var myChart1 = echarts.init(document.getElementById(\'chart_box\'));


function mychart1(time){
    if(time==\'week\'){
        //请求周数据
        //模周拟数据
        var renShu = [20, 49, 70];
        var zhuanHuaLv = [26, 59, 20];
    }else if(time==\'month\'){
        //请求月数据
        //模拟月数据
        var renShu = [10, 29, 10];
        var zhuanHuaLv = [6, 29, 35];
    }else{
        //请求时间段数据
        //模拟时间段数据
        alert(time);
        var renShu = [50, 89, 40];
        var zhuanHuaLv = [60, 39, 75];

    };
        //配置及数据
        optionWeek = {
            title: {
                text: \'用户转换率\',//图表标题
                subtext: \'人数\'//数据标题
            },
            tooltip: {
                trigger: \'axis\',    //提示触发类型      \'item\':数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
                                                //\'axis\':坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
                                                //\'none\':什么都不触发。
                show:true,     //是否显示提示框组件 默认为true
                axisPointer: {
                    type: \'cross\',
                    crossStyle: {
                        color: \'#999\'
                    }
                }
            },
            toolbox: {
                feature: {  //各工具配置项。
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: [\'line\', \'bar\']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data:[\'人数\',\'转化率\']
            },
            xAxis: [
                {
                    type: \'category\',
                    data: [\'访客人数\',\'下单人数\',\'支付人数\'],
                    axisPointer: {
                        type: \'shadow\'
                    }
                }
            ],
            yAxis: [
                {
                    type: \'value\',
                    name: \'人数\',
                    min: 0,
                    //max: 250,
                    interval: 50,
                    axisLabel: {
                        formatter: \'{value} 人\'
                    }
                },
                {
                    type: \'value\',
                    name: \'转化率\',
                    min: 0,
                    max: 100,
                    interval: 25,   //纵坐标间隔
                    axisLabel: {
                        formatter: \'{value} %\'
                    }
                }
            ],
            series: [
                {
                    name:\'人数\',
                    type:\'bar\',         //bar表示柱状图
                    data:renShu,//数据
                    itemStyle: {    //更多柱状图样式搜索API:series-bar.itemStyle
                  normal: {
                        color: \'#FF7400\',//改变柱状的颜色
                        borderColor:\'red\', //描边的颜色:默认#000
                                        borderWidth:0,  //描边的宽度     默认:0
                                        borderType:\'solid\',  //描边的类型:\'dashed\', \'dotted\',\'solid\'(默认)
                                        /*
                                        更多样式:
                                        barBorderRadius:柱状的圆角
                                        shadowBlur:图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                        shadowColor,shadowOffsetX, shadowOffsetY :图形阴影效果
                                        */
                      }
                    },
                },
                {
                    name:\'转化率\',
                    type:\'line\',        //line表示折线图
                    data:zhuanHuaLv,
                    itemStyle: {    //更多折线图线条样式搜索API:series-line.itemStyle
                  normal: {
                    color: \'#009999\',//改变折线点的颜色
                    lineStyle: {    //改变折线样式
                      color: \'#009999\', //改变折线颜色
                                        width:3,    //改变线条的粗细
                    },
                                    
                                    
                  }
                },
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(optionWeek);
}        

 

以上是关于echart异步刷新图表,详细配置注释的主要内容,如果未能解决你的问题,请参考以下文章

echarts_部分图表配置简介_横向柱状图

echarts——各个配置项详细说明总结

echarts——各个配置项详细说明总结

修改echarts的option配置后,图不能刷新

使用Echarts的时候ajax第二次请求的时候,图表会等待请求完成后才刷新出来

echarts——各个配置项详细说明总结