动态更新echart成交量柱状图,并且不重绘,类似K线的更新方式
function setoption(data) {
let dataVolume=volumeChartData;
var option = {
title: {
text: '成交量',
// subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最新成交价']
},
// toolbox: {
// show: true,
// feature: {
// dataView: {readOnly: false},
// restore: {},
// saveAsImage: {}
// }
// },
toolbox: {
show: false,
},
grid: {
left: '5px',
right: '5px',
top: '10px',
bottom: '10px',
containLabel: true
},
dataZoom: [{
textStyle: {
color: '#8392A5'
},
//增加这个代码,就能和K线一样的更新数据
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
dataBackground: {
areaStyle: {
color: '#8392A5'
},
lineStyle: {
opacity: 0.8,
color: '#8392A5'
}
},
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}, {
type: 'inside'
}],
// dataZoom: [
//// {
//// show: true,
//// start: 94,
//// end: 100
//// },
//// {
//// type: 'inside',
//// start: 94,
//// end: 100
//// },
//// {
//// show: true,
//// yAxisIndex: 0,
//// filterMode: 'empty',
//// width: 30,
//// height: '80%',
//// showDataShadow: false,
//// left: '93%'
//// }
// ],
xAxis: [
{
type: 'category',
boundaryGap: true,
data:dataVolume.time
}
],
yAxis: [
{
type: 'value',
scale: false,
name: '成交量',
}
],
series : [
{
name: '成交量',
type: 'bar',
data:dataVolume.prices
}
]
};
return option
}
动态更新echart成交量柱状图,并且不重绘,类似K线的更新方式的更多相关文章
- IE8中伪元素动态作用样式不重绘bug记录
前阵子对公司框架的前端优化中,使用了字体图标(iconfont)来做模块的图标集,供用户进行配置选择. 字体图标的有非常好的灵活性和复用性,可以像处理文字一样通过font-size进行大小设置.通过c ...
- vue echart例——柱状图及高度自适应
1.安装 npm install echarts -s 2.例——点击tab切换时柱状图重绘,高度根据返回数据设置. <template> <div> <ul id=&q ...
- datatable动态列处理,重绘表格(敲黑板,划重点!!!我肝了一天半才彻底弄懂这个东西,TAT)
datatable动态列处理,重绘表格 前言:至于动态列的绘画,我前面博客已经写过了,就是动态列的配置问题,不懂的去我博客看下,今天要写的呢,就是你已经写了一个动态列在datatable,现在你想重新 ...
- Wijmo金融图表系列之等量图&成交量柱状图
Wijmo金融图表有很多类型,我们来一一介绍.之前介绍了平均K线图(Heikin-Ashi)和砖形图,现在我们来一起看看等量图和成交量柱状图. 图表 #3: 等量图(EquiVolume) 等量图和K ...
- Android View重绘和更新: invalidate和requestLayout 总结的不错 赶紧复制。。哈哈
总述:View有两个很重要的方法:invalidate和requestLayout,常用于View重绘和更新. Invalidate:To farce a view to draw,call inva ...
- MFC编辑框接收数据动态更新与刷新方法代码示例-如何让编辑框内容实时更新
MFC编辑框接收数据动态更新与刷新方法代码示例-如何让编辑框内容实时更新 关键代码: //发送数据通知 //from txwtech@163.com LRESULT CCommSampleDlg::O ...
- HighChart学习-更新数据data Series与重绘
一:HighChart介绍 基于JQuery的纯JavaScript的图标库,支持各种图表显示,同时还支持Mootools 与Prototype详细版本支持在这里: JQuery 1.3.2 - 1. ...
- Android视图状态及重绘流程分析,带你一步步深入了解View(三)
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17045157 在前面一篇文章中,我带着大家一起从源码的层面上分析了视图的绘制流程, ...
- View (四)视图状态及重绘流程分析
相 信大家在平时使用View的时候都会发现它是有状态的,比如说有一个按钮,普通状态下是一种效果,但是当手指按下的时候就会变成另外一种效果,这样才会给 人产生一种点击了按钮的感觉.当然了,这种效果相信几 ...
随机推荐
- Python常忘的进阶知识(下)
0.目录 1.装饰器 1.1 为每个函数都增加一个功能 1.2 装饰器只是一种模式 1.3 语法糖 1.4 函数需要传递参数,该如何更改装饰器? 1.5 函数需要传递关键字参数,该如何更改装饰器? 2 ...
- HTTP摘要认证原理以及HttpClient4.3实现
基本认证便捷灵活,但极不安全.用户名和密码都是以明文形式传送的,也没有采取任何措施防止对报文的篡改.安全使用基本认证的唯一方式就是将其与 SSL 配合使用. 摘要认证是另一种HTTP认证协议,它试图修 ...
- Django之CSS,JS静态文件的配置
一. 专门创建一个目录放静态文件,即CSS,JS等. 1)先把jquery.min拿过来. 2)新建一个CSS文件放入样式 3)在login.html中引入.css文件 在login.html中引入. ...
- Mybatis笔记三:iBatis与MyBatis区别
转载:http://www.tuicool.com/articles/auaAru iBatis 框架的主要优势: 1.iBatis 封装了绝大多数的 JDBC 样板代码,使得开发者只需关注 SQL ...
- HDU 4638 莫队算法
Group Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- Android缓存
一个利用内存缓存和磁盘缓存图片的例子 public class BitmapCache { public static final String TAG = "debug"; pr ...
- linux命令行设置git提示符
http://note.youdao.com/noteshare?id=3b6b2ee0925964928fd63d2c51e6bcef
- select、poll和epoll多路I/O复用
一.三者的区别 select select最早于1983年出现在4.2BSD中,它通过一个select()系统调用来监视多个文件描述符的数组,当select()返回后,该数组中就绪的文件描述符便会被 ...
- 题解 P3153 【[CQOI2009]跳舞】
P3153 [CQOI2009]跳舞 题目描述 一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成n对跳交谊舞.每个男孩都不会和同一个女孩跳两首(或更多)舞曲.有一些男孩女孩相互喜欢 ...
- dva 笔记
最简单的结构 // 创建应用 const app = dva(); // 注册 Model app.model({ namespace: 'count', state: 0, reducers: { ...