K线图问题

[menkeydyvh]

One-line summary [问题简述]

如图 K线图走势直线上升 但是蜡烛图上的线是绿色的 ，从显色上看这个颜色应该是红色的不应该显示绿色的

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: "echarts": "^3.7.0",
• Bowser version [浏览器类型和版本]: allS Version [操作系统类型和版本]: all

Expected behaviour [期望结果]

将走势图的蜡烛图颜色标明正确
目前官网的例子蜡烛图也是又这个问题的 希望能解决

ECharts option [ECharts配置项]

option ={
    "title": [{
        "show": false,
        "text": ""
    },
    {
        "text": "VOL",
        "bottom": "25%",
        "left": "5%",
        "textStyle": {
            "fontSize": 10,
            "color": "#96a0af"
        },
        "backgroundColor": "#f2f5f8"
    }],
    "legend": {
        "left": "left",
        "data": ["", "MA5", "MA10", "MA30"]
    },
    "visualMap": {
        "seriesIndex": 4,
        "dimension": 2,
        "show": false,
        "pieces": [{
            "value": 1,
            "color": "#fa6464"
        },
        {
            "value": -1,
            "color": "#32C896"
        }]
    },
    "toolbox": {
        "show": false,
        "feature": {
            "brush": {
                "type": ["lineX", "clear"]
            }
        },
        "left": "70%",
        "top": "2%"
    },
    "brush": {
        "toolbox": ["lineX"],
        "xAxisIndex": "all",
        "brushLink": "all",
        "outOfBrush": {
            "colorAlpha": 0.1
        }
    },
    "grid": [{
        "left": "0%",
        "right": "0%",
        "height": "52%"
    },
    {
        "left": "0%",
        "right": "0%",
        "bottom": "7%",
        "height": "17%"
    }],
    "xAxis": [{
        "type": "category",
        "data": ["2017-08-22", "2017-08-23", "2017-08-24", "2017-08-25", "2017-08-28", "2017-08-29", "2017-08-30", "2017-08-31", "2017-09-01"],
        "scale": true,
        "boundaryGap": false,
        "axisLine": {
            "onZero": false,
            "lineStyle": {
                "color": "#f1f1f1"
            }
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "show": false
        },
        "splitNumber": 20,
        "min": "dataMin",
        "max": 60,
        "axisPointer": {
            "z": 100
        }
    },
    {
        "type": "category",
        "gridIndex": 1,
        "data": ["2017-08-22", "2017-08-23", "2017-08-24", "2017-08-25", "2017-08-28", "2017-08-29", "2017-08-30", "2017-08-31", "2017-09-01"],
        "scale": true,
        "boundaryGap": false,
        "axisLine": {
            "lineStyle": {
                "color": "#96a0af"
            }
        },
        "axisTick": {
            "show": false
        },
        "splitLine": {
            "lineStyle": {
                "color": "#f8f9fa"
            },
            "type": "dotted"
        },
        "axisLabel": {},
        "splitNumber": 20,
        "min": "dataMin",
        "max": 60
    }],
    "yAxis": [{
        "scale": true,
        "splitArea": {
            "show": false
        },
        "axisLabel": {
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "#eeeff0"
            }
        },
        "axisTick": {
            "show": false
        },
        "splitLine": {
            "lineStyle": {
                "color": "#f8f9fa"
            },
            "type": "dotted"
        }
    },
    {
        "scale": true,
        "gridIndex": 1,
        "splitNumber": 2,
        "axisLabel": {
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "#eeeff0"
            }
        },
        "axisTick": {
            "show": false
        },
        "splitLine": {
            "lineStyle": {
                "color": "#f8f9fa"
            },
            "type": "dotted"
        }
    }],
    "dataZoom": [{
        "show": false,
        "type": "inside",
        "xAxisIndex": [0, 1],
        "start": 0,
        "end": 100,
        "zoomLock": true
    },
    {
        "show": false,
        "xAxisIndex": [0, 1],
        "type": "slider",
        "start": 0,
        "end": 100,
        "zoomLock": true
    }],
    "series": [{
        "name": "stock",
        "type": "candlestick",
        "data": [[17.18, 20.62, 17.18, 20.62, 67], [22.68, 22.68, 22.68, 22.68, 68], [24.95, 24.95, 24.95, 24.95, 76], [27.45, 27.45, 27.45, 27.45, 283], [30.2, 30.2, 30.2, 30.2, 501], [33.22, 33.22, 33.22, 33.22, 708], [36.54, 36.54, 36.54, 36.54, 3194], [40.19, 40.19, 40.19, 40.19, 1861], [44.21, 44.21, 44.21, 44.21, 4814]],
        "itemStyle": {
            "normal": {
                "color": "#fa6464",
                "color0": "#32C896",
                "borderColor": "#fa6464",
                "borderColor0": "#32C896"
            }
        },
        "markPoint": {
            "label": {
                "normal": {}
            },
            "data": []
        }
    },
    {
        "name": "MA5",
        "type": "line",
        "data": ["-", "-", "-", "-", "-", 27.7, 30.472, 33.52, 36.872],
        "smooth": true,
        "lineStyle": {
            "normal": {
                "color": "#9664c8"
            }
        },
        "itemStyle": {
            "normal": {
                "color": "#9664c8"
            }
        }
    },
    {
        "name": "MA10",
        "type": "line",
        "data": ["-", "-", "-", "-", "-", "-", "-", "-", "-"],
        "smooth": true,
        "lineStyle": {
            "normal": {
                "color": "#ffd397"
            }
        },
        "itemStyle": {
            "normal": {
                "color": "#ffd397"
            }
        }
    },
    {
        "name": "MA30",
        "type": "line",
        "data": ["-", "-", "-", "-", "-", "-", "-", "-", "-"],
        "smooth": true,
        "lineStyle": {
            "normal": {
                "color": "#32afe1"
            }
        },
        "itemStyle": {
            "normal": {
                "color": "#32afe1"
            }
        }
    },
    {
        "name": "Volume",
        "type": "bar",
        "xAxisIndex": 1,
        "yAxisIndex": 1,
        "data": [[0, 67, 1], [1, 68, 1], [2, 76, 1], [3, 283, 1], [4, 501, 1], [5, 708, 1], [6, 3194, 1], [7, 1861, 1], [8, 4814, 1]]
    }]
};

Other comments [其他信息]

[Ovilia]

这个线的颜色不是你自己配成了绿色吗？

        "itemStyle": {
            "normal": {
                "color": "#fa6464",
                "color0": "#32C896",
                "borderColor": "#fa6464",
                "borderColor0": "#32C896"
            }
        },

color0 是阴线的颜色。

另外，阳线阴线是看开票价收盘价的，而不是前一个数据项和后一个数据项的值。
你这里的数据第一项是红色的没错，第二项开始开盘收盘都是一样的，所以算阴线阳线都没错，这里我们算成了阴线。

[menkeydyvh]

首先并不是我自己要配成绿色的！是你们提供了2个描边参数，你们选中了borderColor0的描边了，当开盘价=收盘价的时候 你们把这种状况归到了阴线的位置

因为开盘收盘一样 所以color 和 color0这两个值都是没有效果因为设置的高度是0，这时图上横线的值取的直接就变成 borderColor0的值了。

这里的borderColor 和 borderColor0是你们计算后去取的，我们这边办法再调整

1.要嘛你们处理一下 直接和上一个收盘价去对比 明确一下取值
2.要嘛要在data上扩展一下让我们可以自己处理

你看是否合理？

[menkeydyvh]

我只是开发前端的，金融这个行业我不熟，但是我知道一点，中国的股市红涨绿跌，很明显涨的时候你给的是跌的颜色，这就有点奇怪了。 或者你能给我一个解决方法

[menkeydyvh]

或者你可以找到一些行业的图来参考是不是行规 我这图参考的是股票代码：603976
你可以看看各大行业K线图是不会给的是绿色的

[Ovilia]

我们打算按你说的 1 的方法支持一下这个功能，细节方面请教一下你：

1. 如果没有上一个交易日怎么处理？
2. 如果和上一个交易日收盘价一样怎么处理？

[Ovilia]

如果你没有额外的信息补充的话，我准备这样处理：

1. 如果收盘价和开盘价一样，根据上一个交易日判断阴阳线；
2. 如果没有上一个交易日，或与上一个交易日持平，则算阳线

[menkeydyvh]

可以的

[qilerongrong]

hi，这个问题解决了嘛，3.7.1版本好像还没有体现出来

[Ovilia]

@qilerongrong 下一个版本上线

[biaowork]

楼主，请问你上面贴出来的例图，是用echarts实现的吗？如何做到K线 和 成交量向左对齐？

[menkeydyvh]

K线 和 成交量向左对齐

barWidth

这个api文档里面有介绍再 series ->type: 'candlestick' ->barWidth 属性 我是计算出来的好像还要计算datazoom一个显示图里面要展现几个蜡烛图

具体代码 项目完成了 也忘记了 哈哈

[biaowork]

barWidth只是决定了bar的宽度，但bar与bar之前的间距并不能控制，因为它的bar 是均分 整个坐标系的，只有几个Kline数据时，每个bar距离好远，并不能靠一边排列，实在是难以接受。 barwith 了是用上了的。目前就是bar的间距问题。 莫非....你是计算了显示图里要展现的数量，然后补充空数据去占据位置？这的确是个办法，开始时也有朋友建议过，但没有采用

[ZiQiangWang]

@Ovilia 你好，目前这个问题还没有完全解决，在xAixs的inverse设置为true以后，k线的表现还是绿色。

[Ovilia]

@ZiQiangWang 好的，我修复一下

[ljcljc]

请问一下这个问题解决了没？k先和成交量左对齐的问题，未来有计划解决吗

[Ovilia]

@ljcljc grid 对齐，k 线和成交量 x 轴数据量相同的情况下，应该就可以？有什么问题吗？

[MrLiZ]

@Ovilia K线图和成交量都很少的时候会居中显示，可以居左显示吗？K线图的柱子间距好像调不了，只有柱状图可以调。

[Ovilia]

@MrLiZ 没有数据的点，也可以给个横坐标占位，纵坐标用 '-'。

[MrLiZ]

@Ovilia 这样应该是可以，不过需要计算不同屏幕的尺寸来判断放多少空数据占位。

[Ovilia]

@MrLiZ 跟屏幕尺寸没关系吧？就是 K 线图有多少数据，成交量里对应就有多少数据，没有数据的用占位

[MrLiZ]

@Ovilia 你没理解。我一开始就说的是K线图和成交量数据都没有。比如年K，可能只有两组数据，就会居中显示，间距非常大。填充空数据就需要根据屏幕尺寸判断填充多少。

[Ovilia]

@MrLiZ 哦，这个意思，那为了保证柱子宽度一致的话，好像的确需要根据屏幕宽度判断

[Ovilia]

@ZiQiangWang 我不太理解 x 轴 inverse 之后难道不是应该还根据实际时间的前后决定颜色吗？http://gallery.echartsjs.com/editor.html?c=xSJNSQvfw7&v=2 这个例子里，以 8-28 数据为例，还是应该与 8-27 的数据进行比较，不然我觉得逻辑上讲不通。

[huogui]

@Ovilia 这个问题还存在呢
这是例子，数据显示不全，而且阴阳线颜色错误
https://codesandbox.io/s/apache-echarts-demo-forked-047g0l?file=/index.html