动态更新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的时候都会发现它是有状态的,比如说有一个按钮,普通状态下是一种效果,但是当手指按下的时候就会变成另外一种效果,这样才会给 人产生一种点击了按钮的感觉.当然了,这种效果相信几 ...
随机推荐
- 【Java】时间转json格式化
@DateTimeFormat(pattern="yyyy-MM-ddHH:mm:ss") @JsonFormat(pattern="yyyy-MM-ddHH: ...
- 求n!中因子k的个数
思路: 求n的阶乘某个因子k的个数,如果n比较小,可以直接算出来,但是如果n很大,此时n!超出了数据的表示范围,这种直接求的方法肯定行不通.其实n!可以表示成统一的方式. n!=(km)*(m!)*a ...
- HTTP摘要认证原理以及HttpClient4.3实现
基本认证便捷灵活,但极不安全.用户名和密码都是以明文形式传送的,也没有采取任何措施防止对报文的篡改.安全使用基本认证的唯一方式就是将其与 SSL 配合使用. 摘要认证是另一种HTTP认证协议,它试图修 ...
- 51nod 1292 字符串中的最大值V2(后缀自动机)
题意: 有一个字符串T.字符串S的F函数值可以如下计算:F(S) = L * S在T中出现的次数(L为字符串S的长度).求所有T的子串S中,函数F(S)的最大值. 题解: 求T的后缀自动机,然后所有每 ...
- [CTSC2016]时空旅行
description 题面 solution 线段树分治+斜率优化毒瘤题 题目可以简化为: 你要维护一个包含元素\((x,c)\)的集合 修改操作为从以前的一个版本更新,修改内容为添加或删除一个元素 ...
- 公告:开通csdn博客,敬请关注!
公告:开通csdn博客,敬请关注!地址:https://blog.csdn.net/cyjch
- libevent学习文档(二)eventbase相关接口和参数
Setting up a default event_base The event_base_new() function allocates and returns a new event base ...
- C++ ------ 创建对象 new 和不 new 的区别
1.作用域不同 不用new:作用域限制在定义类对象的方法中,当方法结束时,类对象也被系统释放了,(安全不会造成内存系统泄漏). 用new:创建的是指向类对象的指针,作用域变成了全局,当程序结束时,必须 ...
- windows下MySQL 5.7+ 解压缩版安装配置方法--转载
方法来自伟大的互联网. 1.去官网下载https://dev.mysql.com/downloads/mysql/.zip格式的MySQL Server的压缩包,根据需要选择x86或x64版.注意:下 ...
- vim 常用快捷键(整理版)
最常用: x 删除后面的字符 X 删除前一个字符 删除3个字符就是3x dd:删除一行 D 删除到行尾 J:删除换行符,使下一行并上来. nJ:连接后面的n行 u:撤销上一次操作 ...