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

时间:2022-08-23 21:24:14

  echarts刷新技巧:

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

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

 

效果预览:

 

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

直接上代码:(用之前务必要引入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);
}