echarts实现K线图问题纪要

第一次在项目中使用echarts画k线图，在此做个小小的记录。 实现效果如下：

• 问题1 双y轴共用一条x轴

修改前：

修改后：

代码如下：

yAxis: [
        {
            type: 'value',
            name: '奈雪的茶',
            position: 'left',
            offset: 80,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#8392A5'
                }
            },
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '喜茶',
            min: 4000,
            max: 6000,
            splitNumber: 6,
            interval: (6000 - 0) / 6,
            position: 'right',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#8392A5'
                }
            },
            axisLabel: {
                formatter: '{value}'
            }
        }
    ]

其实需要加：

    min: 4000,
    max: 6000,
    splitNumber: 6,
    interval: (6000 - 0) / 6,

• 问题2 指定点中显示注释

修改前：

修改后：

为了不让他显示点的图形标记，我将标记换为一个底色透明的图片（满足客户的各种需求） 如下：

    markPoint: {
                label: {
                    normal: {
                        formatter: function (param) {
                            return param != null ? param.name : '';
                        }
                    }
                },
                data: [
                    {
                        name: '意外释放超乐观信号',
                        coord: ['2015-06-04', 15],
                        value: 2600,
                        symbol:'image://http://112.126.102.27:8086/zlqhabi/vfs/zlqh/opacity.png',
                        itemStyle: {
                            color: 'rgb(41,60,85)'
                        }
                    }
                ],
                tooltip: {
                    formatter: function (param) {
                        return param.name + '<br>' + (param.data.coord || '');
                    }
                }
            }

• 问题3 将tooltip修改为中文

修改前：

修改后：

代码如下：

    tooltip: {
        formatter: function (param) {
            var param1 = param[0];
            var param2 = param[1];
            var param1Str = param.length > 0 ? `${param1.seriesName}：<br/>
            开票价：${param1.data[1]} <br/>
            收盘价${param1.data[2]} <br/>
            最高价${param1.data[4]} <br/>
            最低价${param1.data[3]} <br/>
            ` : ''
            var param2Str = param.length > 1 ? `${param2.seriesName}：<br/>
            开票价：${param2.data[1]} <br/>
            收盘价${param2.data[2]} <br/>
            最高价${param2.data[4]} <br/>
            最低价${param2.data[3]} <br/>
            ` : ''
            return [
              '日期: ' + param1.name + '<hr size=1 style="margin: 3px 0">',   
               param1Str + param2Str
            ].join('');
        }
    }

• 问题4

实现brush

brush 是区域选择组件，用户可以选择图中一部分数据，从而便于向用户展示被选中数据，或者他们的一些统计计算结果。

客户的需求是标出来一些点，最好能圈出来，就想到这个功能 代码如下： option中添加brush属性，只能实现手动框选区域数据

    brush: {
        xAxisIndex: 'all',
        brushLink: 'all',
        outOfBrush: {
            colorAlpha: 0.1
        }
    }

我想默认选中区域数据，如下

    setTimeout(function() {
        myChart.dispatchAction({
            type: 'brush',
            areas: [
                {
                    brushType: 'lineX',
                    coordRange: ['2015-01-14', '2015-08-07'],
                    xAxisIndex: 0
                }
            ]
        })
    })

由于执行顺序的原因，直接写myChart.dispatchAction不生效，这个问题困扰了我好久，后来在官方给的例子上试，拿出$.get他就不生效了，后来我把它放在setTimeout就好了

感谢

谢谢你读完本篇文章，希望对你能有所帮助，如有问题欢迎各位指正。