用echarts制作带成交量的K线图

最新推荐文章于 2024-07-06 18:29:48 发布

itsmia

最新推荐文章于 2024-07-06 18:29:48 发布

阅读量608

点赞数 7

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/itsmia/article/details/137130369

版权

用echarts制作带成交量的K线图
官网很多列子有时候少数据就不知道要做出效果只需加那些配置，多余的去除后又容易报错，下面来看一下怎么做的

先看效果如下：

在这里插入图片描述

最主要需要注意的地方就是：

1、grid，xAxis，yAxis，series都要各自设置蜡烛图的成交量的柱状图的，缺一不可，需要写这2个类型的。

2、要使下面成交量的柱状图与上面蜡烛图的颜色一致需要设置visualMap视觉映射组。

3、要修改划过显示的为中文或者不是默认的字需要修改formatter，
4、tooltip里设置formatter要与grid和xAxis等在同一级，放在series里设置是不起作用的

html如下

<div id="main" style="width: 1200px;height: 500px;"></div>

script如下

var chartDom = document.getElementById('main');
   var myChart = echarts.init(chartDom);
    
   var upColor = '#ec0000';//红涨
   var downColor = '#00da3c';//绿跌
   var dataTime=["2004-01-02", "2004-01-05","2004-01-06", "2004-01-07", "2004-01-08","2004-01-09", "2004-01-12", "2004-01-13", "2004-01-14", "2004-01-15",];//时间
   var dataMes=[//蜡烛图数据
       [
           10452.74,
           10409.85,
           10367.41,
           10554.96
       ], [
           10411.85,
           10544.07,
           10411.85,
           10575.92
       ], [
           10543.85,
           10538.66,
           10454.37,
           10584.07
       ], [
           10535.46,
           10529.03,
           10432,
           10587.55
       ], [
           10530.07,
           10592.44,
           10480.59,
           10651.99
       ], [
           10589.25,
           10458.89,
           10420.52,
           10603.48
       ], [
           10461.55,
           10485.18,
           10389.85,
           10543.03
       ], [
           10485.18,
           10427.18,
           10341.19,
           10539.25
       ], [
           10428.67,
           10538.37,
           10426.89,
           10573.85
       ], [
           10534.52,
           10553.85,
           10454.52,
           10639.03
       ],
   ]
  var volumeNum=[ 168890000,