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的更多相关文章
随机推荐
- Spark在美团是怎么实现的
目录 1. 美团离线计算平台架构都有哪些框架? 2. 为什么要使用Spark架构? 3. spark推广过程中需要注意哪些方面? 前言 美团是数据驱动的互联网服务,用户每天在美团上的点击.浏览.下单支 ...
- 07 Python之协程
协程: 协程是一种用户态的轻量级线程, 即协程是由用户程序自己控制调度的 1.Greenlet import time # import greenlet from greenlet import g ...
- python进阶资源
本文为不同阶段的Python学习者从不同角度量身定制了49个学习资源. 初学者 Welcome to Python.org https://www.python.org/ 官方Python站点提供了一 ...
- git 基本命令操作
配置 Git 的相关参数. Git 一共有3个配置文件: 1. 仓库级的配置文件:在仓库的 .git/.gitconfig,该配置文件只对所在的仓库有效.2. 全局配置文件:Mac 系统在 ~/.gi ...
- TensorFlow入门——MNIST深入
#load MNIST data import tensorflow.examples.tutorials.mnist.input_data as input_data mnist = input_d ...
- navicat for mysql 12 的破解安装和基本操作
需要安装Navicat软件 可以复制百度云链接,若失效,请联系我,我会尽快回复 将链接中的破解文件复制到软件安装的位置即完成破解 链接:https://pan.baidu.com/s/1sIkjsd3 ...
- Kruskal重构树+LCA || BZOJ 3732: Network
题面:https://www.lydsy.com/JudgeOnline/problem.php?id=3732 题解:Kruskal重构树板子 代码: #include<cstdio> ...
- linux下redis 安装
--获取redis [redis@localhost ~]$ wget http://download.redis.io/releases/redis-2.8.7.tar.gz --2017-05-2 ...
- JAVA基础编程之打印99乘法表
需求:打印9*9乘法表 技术考核: 1.for嵌套循环 代码: // 打印99乘法表 public static void print99Table() { System.out.println(&q ...
- TCP超时与重传机制与拥塞避免
TCP超时与重传机制 TCP协议是一种面向连接的可靠的传输层协议,它保证了数据的可靠传输,对于一些出错,超时丢包等问题TCP设计的超时与重传机制. 基本原理:在发送一个数据之后,就开启一个定时器,若是 ...