echarts_02
1. 如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。
ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});
2.echarts图表导出excel示例
http://www.jb51.net/article/49343.htm
3.配置echarts工具栏,保存图片
http://www.cnblogs.com/heganlin/p/5764040.html
http://echarts.baidu.com/option.html#toolbox.feature.saveAsImage.icon
function echarts_test (id, x_data, y_item)
{
// 基于准备好的dom,初始化echarts图表
var myChart = echarts.init(document.getElementById(id));
var option = {
title:{
text:'title_name',
show:false,
},
tooltip: {
show: true
},
legend: {
data:['功率/dB']
},
toolbox: {
show: true,
feature: {
magicType: {
type: ['stack', 'tiled']
},
dataView: {show:true},
saveAsImage: {
show:true,
excludeComponents :['toolbox'],
pixelRatio: 2 }
}
},
xAxis : [
{
type : 'category',
data : x_data,
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"功率/dB",
"type":"bar",
"data": y_item,
}
],
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
start: 10,
end: 60
},
{
type: 'inside',
xAxisIndex: 0,
start: 10,
end: 60
},
{
type: 'slider',
yAxisIndex: 0,
start: 30,
end: 80
},
{
type: 'inside',
yAxisIndex: 0,
start: 30,
end: 80
}
], };
//myChart.showLoading();
// 为echarts对象加载数据
myChart.setOption(option);
}
echarts_02的更多相关文章
随机推荐
- leetcode 1051. Height Checker
Students are asked to stand in non-decreasing order of heights for an annual photo. Return the minim ...
- 104、验证Swarm数据持久性 (Swarm11)
参考https://www.cnblogs.com/CloudMan6/p/8016994.html 上一节我们成功将 nfs 的volume挂载到 Service上,本节验证 Failover时 ...
- 一个页面多图表展示(四个div的方式)
效果如图所示,一个页面四个div,每个div里面展示相应的数据,因为这种效果会有点麻烦,而且不太雅观我就换了一种写法,一个div里面用四个图表,共用一个图例,先放上这个方式的效果图和源码,后期会再发布 ...
- Proxy.newInstance与InvocationHandler的使用示例
先定义一个接口,根据代理模式的原理,被代理类与代理类都要实现它. public interface Person { void eat(); } 再写一个实际执行任务的类(被代理类): public ...
- springboot(1)-基础篇
什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...
- kubernetes创建资源的两种方式
一.创建方式分类: 命令 vs 配置文件 Kubernetes 支持两种方式创建资源: 1.用 kubectl 命令行的方式直接创建,比如: kubectl run httpd-app --image ...
- Winform Global exception and task parallel library exception;
static class Program { /// <summary> /// 应用程序的主入口点. /// </summary> [STAThread] static vo ...
- WIndows cmd command 指令总结
1. 文件操作 显示当前文件夹内所有文件 dir dir /s 仅显示特定后缀的文件 # 查找当前目录下所有mp3文件dir /s *.mp3
- 关于log4j的配置文件
因为要在spring中添加Mongodb,在网上查阅资料的时候我发现有人在web.xml中添加如下代码: <context-param> <param-name>l ...
- spring MVC 后端 接收 前端 批量添加的数据(简单示例)
第一种方式:(使用ajax的方式) 前端代码: <%@ page contentType="text/html;charset=UTF-8" language="j ...