动态更新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的时候都会发现它是有状态的,比如说有一个按钮,普通状态下是一种效果,但是当手指按下的时候就会变成另外一种效果,这样才会给 人产生一种点击了按钮的感觉.当然了,这种效果相信几 ...
随机推荐
- 获取网站图标Icon
通常情况下,做网站的都会给自己的网站添加一个Icon,浏览器上一长排的标签页,用Icon来区分就显得更加醒目.现在想找一个没有Icon的网站并不好找,可见没有Icon的网站是多么的业余啊." ...
- 【Mybatis】Mybatis的sql模糊查询
这个网站中有很多方法.https://code.google.com/p/mybatis/issues/detail?id=85 自己试验了如下的方法. 1. 参数中直接加入%% param.set ...
- 我是一个CPU:这个世界慢!死!了!
最近小编看到一篇十分有意思的文章,多方位.无死角的讲解了CPU关于处理速度的理解,看完之后真是豁然开朗.IOT时代,随着科技的发展CPU芯片的处理能力越来越强,强大的程度已经超乎了我们的想象.今天就把 ...
- Redis的键值命令、服务器命令
Redis提供了丰富的命令对数据库和各种数据类型进行操作,这些命令可以在Linux 终端使用.在编程时,比如各类语言包,这些命令都有对应的方法. 键值命令 服务器命令 获取数据库中所有键名 >k ...
- [POI2008]MAF-Mafia
Description 有n个人,每个人手里有一把手枪.一开始所有人都选定一个人瞄准(有可能瞄准自己).然后他们按某个顺序开枪,且任意时刻只有一个人开枪.因此,对于不同的开枪顺序,最后死的人也不同. ...
- 服务器上的 Git - 在服务器上搭建 Git
http://git-scm.com/book/zh/v2/%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%8A%E7%9A%84-Git-%E5%9C%A8%E6%9C%8D%E ...
- struts2 - View页面中获取Action的成员变量
struts2 - View页面中获取Action的成员变量 2016年03月02日 11:04:44 IT男青年 阅读数:1074 View页面中获取Action的成员变量 按照Struts的设 ...
- 洛谷P1106 删数问题
题目描述 键盘输入一个高精度的正整数N,去掉其中任意k个数字后剩下的数字按原左右次序将组成一个新的正整数.编程对给定的N和k,寻找一种方案使得剩下的数字组成的新数最小. 输出应包括所去掉的数字的位置和 ...
- javascript基本介绍
javascript是一种广泛用于客户端web开发的脚本语言,常采用来给html网页添加动态功能,比如响应客户的各种操作. 脚本语言是什么? (1).脚本语言往往不能独立运行,它和html/jsp/p ...
- 【题解】期末考试 六省联考 2017 洛谷 P3745 BZOJ 4868 贪心 三分
题目传送门:这里是萌萌哒传送门(>,<) 啊♀,据说这题有个完全贪心的做法,但是要维护太多东西好麻烦的(>,<),于是就来口胡一发三分的做法. 思路很简单,假设我指定了一个x, ...