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

本文主要是介绍用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,221290000,191460000, 225490000,237770000, 223250000,197960000,197310000,186280000,260090000];//交易量
    var volumeData=[]//交易量添加颜色判断
    for (var i = 0; i < dataMes.length; i++) {
        //console.log("开盘价"+dataMes[i][0])
        //console.log("收盘价"+dataMes[i][1])
        volumeData.push([dataTime[i], volumeNum[i], dataMes[i][0] > dataMes[i][1] ? 1 : -1]);
        //第一个代表时间，第二个代表成交量的值，第三个判断颜色1为绿色-1为红色
    }
    var option;
    option = {

            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    link: {xAxisIndex: 'all'},//上下划过分开展示还是一起展示
                },
                textStyle: {
                    color: '#000'
                },
                formatter: function (params) {//修改鼠标划过显示为中文

                    if(params[0].componentSubType=="candlestick"){//先划过蜡烛图
                        var params1 = params[0];//开盘收盘最低最高数据汇总
                        var params2 = params[1].data[1];//成交量数据

                    }else if(params[0].componentSubType=="bar"){//先划过成交量
                        var params1 = params[1];//开盘收盘最低最高数据汇总
                        var params2 = params[0].data[1];//成交量数据

                    }
                    var currentItemData = params1.data;//k线数据
                    return params1.name + '<br>' +
                        '开盘价:' + currentItemData[1] + '<br>' +
                        '收盘价:' + currentItemData[2] + '<br>' +
                        '最低价:' + currentItemData[3] + '<br>' +
                        '最高价:' + currentItemData[4] + '<br>' +
                        '成交量:' + params2
                }

                // extraCssText: 'width: 170px'
            },

            axisPointer: {
                link: {xAxisIndex: 'all'},//整体划过还是单个划过
                label: {
                    backgroundColor: '#777'
                }
            },
            visualMap: {//视觉映射组，就是将数据映射到视觉元素
                show: false,
                seriesIndex: 1,//指定取哪个系列的数据，第几个图形的数据，从0开始，1代表的是成交量的柱状图
                pieces: [{//自定义『分段式视觉映射组件』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
                    value: 1,//value值为1则用downColor颜色的样式
                    color: downColor
                }, {
                    value: -1,
                    color: upColor
                }]
            },
            grid: [
                {//蜡烛图的位置
                    left: '10%',
                    right: '8%',
                    height: '50%'
                },
                {//成交量柱状图的位置
                    left: '10%',
                    right: '8%',
                    top: '63%',
                    height: '16%'
                }
            ],
            xAxis: [
                {//蜡烛图的设置
                    type: 'category',
                    data: dataTime,
                    scale: true,
                    //boundaryGap: false,
                    axisLine: {onZero: false},
                    splitLine: {show: false},
                    splitNumber: 20,
                    min: 'dataMin',
                    max: 'dataMax',
                    axisPointer: {
                        z: 100
                    },

                },
                {//成交量柱状图的设置
                    type: 'category',
                    gridIndex: 1,
                    data: dataTime,
                    scale: true,
                    //boundaryGap: false,
                    axisLine: {onZero: false},
                    axisTick: {show: false},
                    splitLine: {show: false},
                    axisLabel: {show: false},
                    splitNumber: 20,
                    min: 'dataMin',
                    max: 'dataMax'
                }
            ],
            yAxis: [
                {
                    scale: true,
                    splitArea: {
                        show: true
                    }
                },
                {
                    scale: true,
                    gridIndex: 1,
                    splitNumber: 2,
                    axisLabel: {show: false},
                    axisLine: {show: false},
                    axisTick: {show: false},
                    splitLine: {show: false}
                }
            ],

            series: [{//蜡烛图的设置
                    type: 'candlestick',
                    data: dataMes,
                    barWidth : 30,//图形的宽度
                    itemStyle: {
                        color: upColor,
                        color0: downColor,
                        borderColor: null,
                        borderColor0: null
                    },
                },
                {//成交量柱状图的设置
                    name: 'Volume',
                    type: 'bar',
                    barWidth : 30,//柱状图的宽度
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    data: volumeData
                }
            ]
        };


    option && myChart.setOption(option);

　如有其他需要可以查看官网的例子地址如下：https://echarts.apache.org/examples/zh/editor.html?c=candlestick-brush

这篇关于用echarts制作带成交量的K线图的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！