New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

K线图问题 #6583

Open
menkeydyvh opened this Issue Sep 4, 2017 · 23 comments

Comments

Projects
None yet
7 participants
@menkeydyvh

menkeydyvh commented Sep 4, 2017

One-line summary [问题简述]

image

如图 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

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Sep 4, 2017

Contributor

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

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

color0 是阴线的颜色。

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

Contributor

Ovilia commented Sep 4, 2017

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

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

color0 是阴线的颜色。

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

@menkeydyvh

This comment has been minimized.

Show comment
Hide comment
@menkeydyvh

menkeydyvh Sep 4, 2017

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

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

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

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

你看是否合理?

menkeydyvh commented Sep 4, 2017

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

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

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

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

你看是否合理?

@menkeydyvh

This comment has been minimized.

Show comment
Hide comment
@menkeydyvh

menkeydyvh Sep 4, 2017

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

menkeydyvh commented Sep 4, 2017

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

@Ovilia Ovilia self-assigned this Sep 4, 2017

@menkeydyvh

This comment has been minimized.

Show comment
Hide comment
@menkeydyvh

menkeydyvh Sep 4, 2017

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

menkeydyvh commented Sep 4, 2017

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

@Ovilia

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Sep 4, 2017

Contributor

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

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

Ovilia commented Sep 4, 2017

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

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

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Sep 4, 2017

Contributor

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

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

Ovilia commented Sep 4, 2017

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

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

This comment has been minimized.

Show comment
Hide comment
@menkeydyvh

menkeydyvh commented Sep 4, 2017

可以的

@qilerongrong

This comment has been minimized.

Show comment
Hide comment
@qilerongrong

qilerongrong Sep 11, 2017

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

qilerongrong commented Sep 11, 2017

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

@Ovilia

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Sep 11, 2017

Contributor

@qilerongrong 下一个版本上线

Contributor

Ovilia commented Sep 11, 2017

@qilerongrong 下一个版本上线

@biaowork

This comment has been minimized.

Show comment
Hide comment
@biaowork

biaowork Oct 25, 2017

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

biaowork commented Oct 25, 2017

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

@menkeydyvh

This comment has been minimized.

Show comment
Hide comment
@menkeydyvh

menkeydyvh Oct 25, 2017

K线 和 成交量向左对齐

barWidth

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

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

menkeydyvh commented Oct 25, 2017

K线 和 成交量向左对齐

barWidth

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

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

@biaowork

This comment has been minimized.

Show comment
Hide comment
@biaowork

biaowork Oct 25, 2017

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

biaowork commented Oct 25, 2017

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

@ZiQiangWang

This comment has been minimized.

Show comment
Hide comment
@ZiQiangWang

ZiQiangWang Feb 7, 2018

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

ZiQiangWang commented Feb 7, 2018

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

@Ovilia

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Feb 7, 2018

Contributor

@ZiQiangWang 好的,我修复一下

Contributor

Ovilia commented Feb 7, 2018

@ZiQiangWang 好的,我修复一下

@Ovilia Ovilia reopened this Feb 7, 2018

@ljcljc

This comment has been minimized.

Show comment
Hide comment
@ljcljc

ljcljc Mar 29, 2018

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

ljcljc commented Mar 29, 2018

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

@Ovilia

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Mar 29, 2018

Contributor

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

Contributor

Ovilia commented Mar 29, 2018

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

@MrLiZ

This comment has been minimized.

Show comment
Hide comment
@MrLiZ

MrLiZ Mar 29, 2018

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

MrLiZ commented Mar 29, 2018

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

@Ovilia

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Mar 29, 2018

Contributor

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

Contributor

Ovilia commented Mar 29, 2018

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

@MrLiZ

This comment has been minimized.

Show comment
Hide comment
@MrLiZ

MrLiZ Apr 2, 2018

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

MrLiZ commented Apr 2, 2018

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

@Ovilia

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Apr 3, 2018

Contributor

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

Contributor

Ovilia commented Apr 3, 2018

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

@MrLiZ

This comment has been minimized.

Show comment
Hide comment
@MrLiZ

MrLiZ Apr 3, 2018

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

MrLiZ commented Apr 3, 2018

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

@Ovilia

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Apr 3, 2018

Contributor

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

Contributor

Ovilia commented Apr 3, 2018

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

@Ovilia Ovilia self-assigned this Aug 28, 2018

@Ovilia Ovilia added the bug label Aug 28, 2018

@Ovilia

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Aug 28, 2018

Contributor

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

Contributor

Ovilia commented Aug 28, 2018

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

@Ovilia Ovilia added the pending label Aug 28, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment