动态更新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的时候都会发现它是有状态的,比如说有一个按钮,普通状态下是一种效果,但是当手指按下的时候就会变成另外一种效果,这样才会给 人产生一种点击了按钮的感觉.当然了,这种效果相信几 ...
随机推荐
- shell脚本学习—正则表达式
正则表达式概念.特点 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”, 这个“规则字符串”用来表达对字符串的一种过滤辑. 给定一个 ...
- vue项目 axios封装第二弹
import axios from "axios"; import qs from "qs"; import { Message, MessageBox } f ...
- 【BZOJ2806】Cheat(后缀自动机,二分答案,动态规划,单调队列)
[BZOJ2806]Cheat(后缀自动机,二分答案,动态规划,单调队列) 题面 BZOJ 洛谷 题解 很有趣的一道题啊 对于在所有的串上面进行匹配? 很明显的后缀自动机 所以先构建出广义后缀自动机 ...
- 修改apache的注册表值提高系统权限
In Windows environments when a service is registered with the system a new key is created in the reg ...
- 专题训练之数位DP
推荐以下一篇博客:https://blog.csdn.net/wust_zzwh/article/details/52100392 1.(HDOJ2089)http://acm.hdu.edu.cn/ ...
- C# Emgu CV学习笔记二之图像读写的两种方法
http://blog.csdn.net/marvinhong/article/details/6800450 图像显示在控件loadPictureBox上 方法一 //读取图像001.jpg Int ...
- 「Python」_init_理解与学习
Python是面向对象的编程语言,因此我从Class.Instance以及属性(property/attribute)的角度出发解释. _init_根据其英文意思(initialize),用来初始化一 ...
- 题解 P3153 【[CQOI2009]跳舞】
P3153 [CQOI2009]跳舞 题目描述 一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成n对跳交谊舞.每个男孩都不会和同一个女孩跳两首(或更多)舞曲.有一些男孩女孩相互喜欢 ...
- 前端PHP入门-031-文件上传-六脉神剑
php.ini的设置 php.ini的文件太多,找不到的时候你可以使用 Ctrl+F 搜索相关配置项. 配置项 功能说明 file_uploads on 为开启文件上传功能,off 为关闭 post_ ...
- [DeeplearningAI笔记]卷积神经网络1.9-1.11池化层/卷积神经网络示例/优点
4.1卷积神经网络 觉得有用的话,欢迎一起讨论相互学习~Follow Me 1.9池化层 优点 池化层可以缩减模型的大小,提高计算速度,同时提高所提取特征的鲁棒性. 池化层操作 池化操作与卷积操作类似 ...