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异步刷新图表，详细配置注释的更多相关文章
- Eclipse配置注释模板详细介绍
<引言> Eclipse 中提供了一个非常人性化的功能,可以自动生成注释为我们程序员做项目时提供便利,并且注释内容还具有定制化 可以根据自己的喜好配置不同的样式. <正文> 首 ...
- (转)springMVC+mybatis+ehcache详细配置
一. Mybatis+Ehcache配置 为了提高MyBatis的性能,有时候我们需要加入缓存支持,目前用的比较多的缓存莫过于ehcache缓存了,ehcache性能强大,而且位各种应用都提供了解决方 ...
- HighCharts学习笔记(二)HighCharts结构及详细配置
HighCharts结构及详细配置: 一.HighCharts整体结构: 通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载) var chart = new Hi ...
- HighCharts选项和参数详细配置查询表
概述:作为一款出色的交互图表制作工具,HighCharts有着全面的选项.参数等配置信息.为了帮助大家进一步掌握HighCharts,今天我们为大家整理了HighCharts的所有配置信息和说明,将其 ...
- Window VNC远程控制LINUX：VNC详细配置介绍
Window VNC远程控制LINUX:VNC详细配置介绍 //---------------------------------------vnc linux下的详细配置 1.VNC的启动/停止/重 ...
- CentOS+Nginx+PHP+MySQL详细配置(图解)
原文地址: http://www.jb51.net/article/26597.htm CentOS+Nginx+PHP+MySQL详细配置(带有图解),需要的朋友可以参考下. 一.安装MySQL ...
- DosBox 的 DOSBOX.CONF 的详细配置说
1.首先下载 DOSbox 0.72 版. 2.下载完毕,开始安装.安装到任意目录均可.安装完毕会在开始菜单生成程序组,DOSBox.conf 文件是 DOSbox 的配置文件,保持默认配置就可 ...
- openssl建立证书，非常详细配置ssl+apache
原文链接:http://blog.51yip.com/apachenginx/958.html openssl建立证书,非常详细配置ssl+apache 张映 发表于 2010-08-07 分类目录: ...
- mybatis-generator 详细配置及使用，爬坑记录
mybatis-generator 详细配置及使用,爬坑记录 提示:如果不成功一定是项目路径和 数据库配置出问题,本篇基于 MySQL 8.0.13,调试没有问题. 如果失败,建议使用相同的项目结构, ...
随机推荐
- mysql安装简单教程(自动安装/配置安装)
mysql安装简单教程(自动安装/配置安装) 1.1前言: 由于特殊原因,在最近2-3个月里mysql真是安装了无数遍,每次安装都要上网找教程,每个教程基本都不一样,因此还是自己写下来比较好,毕竟自己 ...
- CCF-201512-2-消除类游戏
问题描述 试题编号: 201512-2 试题名称: 消除类游戏 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 消除类游戏是深受大众欢迎的一种游戏,游戏在一个包含有n行m列的游 ...
- VMware12提示 已将该虚拟机配置为使用 64 位客户机操作系统。但是，无法执行 64 位操作。
VMware12提示 已将该虚拟机配置为使用 64 位客户机操作系统.但是,无法执行 64 位操作. 此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态 解决办法: 下载LeoM ...
- window下phpstudy的nginx配置虚拟主机
由于很长时间没有配置Apache,虽然说知道怎么配置nginx,但是还是花费了一些时间这次记下来下次直接用 在其他选项文件菜单中->打开配置文件->选择vhosts-conf nginx的 ...
- 小随笔：利用Shader实现模型爆炸和沙粒化的效果
0x00 前言 上一篇小随笔<小随笔:利用Shader给斯坦福兔子长毛和实现雪地效果>中,我和大家聊了聊著名的斯坦福兔子和利用geometry shader实现的一些效果.这篇文章继续沿用 ...
- jupyter的交互小工具-----ipyleaflet
ipyleaflet(一个用于创建简单的交互式地图的平移和缩放的库,ipyleaflet支持诸如多边形,标记和更一般的任何地理编码地理数据结构的注释) from ipyleaflet import M ...
- mustache.js 使用
对于mustache模板,我是属于即用即查的方法,以下记录仅是我常用的方式.方便以后使用时不用再去项目中去找,因为真的不好找.(此处 -->serious 脸) 当需要渲染一些数据列表的时候,使 ...
- 》》stroll--各种特效下拉菜单
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- UILabel 的使用
直接上代码: /* UILabel 使用 */ UILabel *aLable = [[UILabel alloc] initWithFrame:self.window.bounds]; aLable ...
- Scala并发编程react、loop代码实战具体解释
演示样例代码及凝视: //scala并发编程中的react和loop,共同特点: //通过线程存用的方式让性能有所提升. //Actor本身的运行,被actor子系统管理的时候,会有一个或者多个远程的 ...