动态更新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}
时间: 2024-08-07 12:29:28

动态更新echart成交量柱状图,并且不重绘,类似K线的更新方式的相关文章

浏览器的渲染页面过程和重排、重绘

渲染页面的过程: 1.解析html源码,创建dom树.每个标签都是一个节点. 2.解析css 3.构建dom树,并且计算出样式(padding.margin等),然后构建 渲染树.对于渲染树和dom树的不同是:dom树的每一个标签都是一个节点,但是渲染树会忽略掉不需要渲染的元素,例如head.display:none的元素.渲染树中的每一个节点都存储有对应的css属性. 4.渲染树创建好后,浏览器就可以根据渲染树直接把页面绘制到屏幕上. 重排和重绘: 重排:就是渲染树的一部分必须要更新 并且节点

前端性能优化之重排和重绘

一.重排 & 重绘 有经验的大佬对这个概念一定不会陌生,"浏览器输入URL发生了什么".估计大家已经烂熟于心了,从计算机网络到JS引擎,一路飞奔到浏览器渲染引擎. 经验越多就能理解的越深. 感兴趣的同学可以看一下这篇文章,深度和广度俱佳: <从输入 URL 到页面加载的过程?如何由一道题完善自己的前端知识体系!> 切回正题,我们继续探讨何为重排.浏览器下载完页面所有的资源后,就要开始构建DOM树,与此同时还会构建渲染树(Render Tree).(其实在构建渲染树之

Wijmo金融图表系列之等量图&amp;成交量柱状图

Wijmo金融图表有很多类型,我们来一一介绍.之前介绍了平均K线图(Heikin-Ashi)和砖形图,现在我们来一起看看等量图和成交量柱状图. 图表 #3: 等量图(EquiVolume) 等量图和K线图相似,但是以宽度可变的框(无蜡烛芯)代替了k线.取缔了开盘/收盘组件的是等量图线框包含了高价和低价组件,并且线框宽度成为第三个标识:成交量.下面的示例表示为一天的总交易额.颜色表示收盘价是否高于或低于前面的收盘价. 下面示例中,您可以看到股价哪里呈上升趋势,哪里下跌,在10月29至30日,在股价

Android视图状态及重绘流程分析,带你一步步深入了解View(三)

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17045157 在 前面一篇文章中,我带着大家一起从源码的层面上分析了视图的绘制流程,了解了视图绘制流程中onMeasure.onLayout.onDraw这三个最 重要步骤的工作原理,那么今天我们将继续对View进行深入探究,学习一下视图状态以及重绘方面的知识.如果你还没有看过我前面一篇文章,可以先去阅读 Android视图绘制流程完全解析,带你一步步深入了解View(二) .

Repaints and Reflows 重绘和重排版

当浏览器下载完所有页面HTML标记,JavaScript,CSS,图片之后,它解析文件并创建两个内部数据 一棵DOM树 表示页面结构 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:普通表格; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-st

前端必备的浏览器知识(渲染过程、回流和重绘等)

常用哪几种浏览器测试?有哪些浏览器内核(Rendering Engine)? (Q1)浏览器:Chrome,IE,FireFox,Safari,Opera. (Q2)对应内核:Webkit,Trident,Gecko,Webkit,Presto.(国内的浏览器,除了傲游是直接基于Webkit开发的,其他基本都是基于谷歌在webkit上开发的Chromium,当然谷歌自己也是用的Chromium.另外值得的一提的是手机的系统(安卓.苹果)默认浏览器都是基于webkit内核的) 如何理解浏览器内核?

页面的重绘与回流及优化

首先要清楚页面呈现的具体过程: 1.  浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象.DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 2. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体,在解析的过程中会去掉浏览器不能识别的样式,比如IE会去掉-moz开头的样式,而FF会去掉_开头的样式. 3.DOM Tree 和样式结构体组合后构建ren

css重绘与回流

高性能WEB开发之页面呈现.重绘.回流(1) 2011-04-25 10:11 BearRui BearRui的Blog 字号:T | T 在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. AD:2014WOT全球软件技术峰会北京站 课程视频发布 在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到

【REACT NATIVE 系列教程之六】重写SHOULDCOMPONENTUPDATE指定组件是否进行重绘

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2252.html 前几天,Himi 写练手项目时,遇到子更新父state中的某一个属性值,且对父进行重绘时,父包含的所有子组件都进行重绘 – -- 非常尴尬. 查阅了RN文档,终于在生命周期篇看到了想要的答案. 仔细看过RN关于生命周期篇的童鞋应该知道,就是它:shouldComponentUpdate 官方解释此函