动态更新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的时候都会发现它是有状态的,比如说有一个按钮,普通状态下是一种效果,但是当手指按下的时候就会变成另外一种效果,这样才会给 人产生一种点击了按钮的感觉.当然了,这种效果相信几 ...
随机推荐
- 解析php addslashes()与addclashes()函数的区别和比较
一. addslashes() 函数 addslashes(string) 函数在指定的预定义字符前添加反斜杠.这些预定义字符是:•单引号 (')•双引号 (")•反斜杠 (\)•NULL ...
- P3386 【模板】二分图匹配
题目背景 二分图 题目描述 给定一个二分图,结点个数分别为n,m,边数为e,求二分图最大匹配数 输入输出格式 输入格式: 第一行,n,m,e 第二至e+1行,每行两个正整数u,v,表示u,v有一条连边 ...
- 【BZOJ3625/CF438E】小朋友和二叉树(多项式求逆,多项式开方)
[BZOJ3625/CF438E]小朋友和二叉树(多项式求逆,多项式开方) 题面 BZOJ CodeForces 大致题意: 对于每个数出现的次数对应的多项式\(A(x)\) 求\[f(x)=\fra ...
- 【bzoj4559】成绩比较
Portal -->bzoj4559 补档计划 借这题补个档--拉格朗日插值 插值的话大概就是有一个\(n-1\)次多项式\(A(x)\),你只知道它在\(n\)处的点值,分别是\ ...
- spring mybatis 多数据源配置
1.创建好数据库的配置文件 mysql.url=jdbc:mysql://***/***?useUnicode=true&characterEncoding=UTF-8 mysql.usern ...
- js中字符串全部替换
废话不多说,直接发结果 在js中字符串全部替换可以用以下方法: str.replace(/需要替换的字符串/g,"新字符串") 比如: "yyyy-MM-dd-hh-mm ...
- SpringBoot (六) :如何优雅的使用 mybatis
原文出处: 纯洁的微笑 这两天启动了一个新项目因为项目组成员一直都使用的是mybatis,虽然个人比较喜欢jpa这种极简的模式,但是为了项目保持统一性技术选型还是定了 mybatis.到网上找了一下关 ...
- Python之文件操作:os模块
Python os 模块提供了一个统一的操作系统接口函数 一.对于系统的操作 1.os.name 当前使用平台 其中 ‘nt’ 是 windows,’posix’ 是linux 或者 unix 2.o ...
- fastreport中文乱码问题
fastreport的中文乱码问题,确实让人头疼,我使用的是delphi6+fastrepport4.7,在4.7版本中,主要表现在以下几种情况. 预览不乱码,保存乱码. 简体不乱码,繁体乱码. 简体 ...
- Struts2版本更新报错:>>> ActionContextCleanUp <<< is deprecated! Please use the new filters!
因低版本Struts2存在漏洞,更新为较新的版本.启动时,报如下警告信息: ************************************************************** ...