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=" 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', //改变折线颜色
                                        3,    //改变线条的粗细
                    },
                                    
                                    
                  }
                },
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(optionWeek);
}        
原文地址:https://www.cnblogs.com/LChenglong/p/7400070.html