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异步刷新图表，详细配置注释的主要内容，如果未能解决你的问题，请参考以下文章