ECharts K线 配置项

HTML 专栏收录该内容
1 篇文章 0 订阅
直接贴代码。	欢迎评论区互相讨论。
附上 官网配置项地址 https://www.echartsjs.com/option.html
	<script type="text/javascript">
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;

            var coinName = 'CLVMCC';        // 币种名字
            var upColor = '#c15465';        // 上涨颜色
            var downColor = '#4daa90';      // 下跌颜色
            var gridHeight2 = 20,gridBottom2 = 10;
            var grid2 = { left: 0, right: '15%', bottom: gridBottom2+'%', height: gridHeight2+'%' };
            var grid1 = { left: 0, right: '15%', height: '50%', bottom: (gridHeight2 + gridBottom2) + '%' };

            function splitData(rawData) {
                var categoryData = [];
                var values = [];
                var volumes = [];
                for (var i = 0; i < rawData.length; i++) {
                    categoryData.push(rawData[i].splice(0, 1)[0]);
                    values.push(rawData[i]);
                    volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
                }

                return {
                    categoryData: categoryData,
                    values: values,
                    volumes: volumes
                };
            }

            function calculateMA(dayCount, data) {
                var result = [];
                for (var i = 0, len = data.values.length; i < len; i++) {
                    if (i < dayCount) {
                        result.push('-');
                        continue;
                    }
                    var sum = 0;
                    for (var j = 0; j < dayCount; j++) {
                        sum += data.values[i - j][1];
                    }
                    result.push(+(sum / dayCount).toFixed(3));
                }
                return result;
            }

            var data = splitData(k_data);

            myChart.setOption(option = {
                backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#09131d'     // 0% 处的颜色
                    }, {
                        offset: 1, color: '#1b273f'     // 100% 处的颜色
                    }],
                    global: false                       // 缺省为 false
                },
                animation: true,                        // 动画开关
                legend: {                               // k线的展示的开关样式
                    show: true,     // 是否展示
                    top: '20%',     // 上边距
                    left: 'left',   // 左边距
                    padding: 10,    // 内边距
                    itemWidth: 0,   // 图例图片宽度
                    itemHeight: 0,  // 图例图片高度
                    textStyle : { backgroundColor : 'rgba(0,0,0,0)' },
                    selected: {},                       // 设置某项是否展示     //'MA30': false,
                    selectedMode: true,                 // 图例选择的模式       true false 'single' 'multiple'
                    borderColor : 'rgba(0,0,0,0)',      // 图例描边的颜色
                    inactiveColor: '#fff',              // 图例关闭时的颜色
                    backgroundColor : 'transparent',    // 图例背景的颜色
                    data: [ {name: coinName, textStyle: { color: '#3d80cd' } },{name: 'MA05', textStyle: { color: '#ecd899' } },{name: 'MA10', textStyle: { color: '#7fcec0' } }, {name: 'MA30', textStyle: { color: '#c294f7' } }],// 'MA20',
                },
                tooltip: {                              // 全局提示窗样式设置
                    confine: true,
                    trigger: 'axis',                    // 触发类型。 item: 无类目轴的图表  axis: 坐标轴触发,类目轴的图表 none: 无
                    padding: 10,
                    hideDelay : 0,                      // 隐藏延迟,当点击在展示区域外,提示框消失时,是否进行延时关闭, 毫秒级别
                    textStyle: { color: '#fff' },       // 提示框文本样式,
                    axisPointer: {                      // 刻度线与展示文本
                        type: 'cross',
                        label: {
                            color: '#fff',
                            shadowBlur: 0,
                            borderWidth: 1,
                            borderColor: '#7286a5',
                            backgroundColor: '#0c1723',
                        },
                    },
                    borderWidth: 1,
                    borderColor: '#7286a5',
                    backgroundColor: 'rgba(12, 23, 35, 1)',

                    formatter: function(params, ticket, callback) {
                        var result = '时间: ' +params[0].name + "<br/>";
                        params.forEach(function(item) {
                            if(item.seriesName==coinName) {
                                result += item.marker + " " + '开盘价: ' + item.data[0] + '<br/>' +
                                item.marker + " " +  '最高价: ' + item.data[3] + '<br/>'+
                                item.marker + " " +  '最底价: ' + item.data[2] + '<br/>'+
                                item.marker + " " +  '收盘价: ' + item.data[1] + '<br/>';
                            } else {
                                result += item.marker + " " +  item.seriesName + " : " + item.value.toString().substring(0, 7) + "</br>";//item.marker + " " + 
                            }
                        });
                        return result;
                    },
                },
                axisPointer: {
                    link: {xAxisIndex: 'all'},
                    label: {
                        backgroundColor: '#777'
                    }
                },
                toolbox: {
                    show: false,
                    feature: {
                        dataZoom: {
                            yAxisIndex: false
                        },
                        brush: {
                            type: ['lineX', 'clear']
                        }
                    }
                },
                brush: {
                    xAxisIndex: 'all',
                    brushLink: 'all',
                    outOfBrush: {
                        colorAlpha: 0.1
                    }
                },
                visualMap: {
                    show: false,
                    seriesIndex: 5,
                    dimension: 2,
                    pieces: [{
                        value: 1,
                        color: downColor
                    }, {
                        value: -1,
                        color: upColor
                    }]
                },
                grid: [ grid1, grid2 ],
                xAxis: [                                // 直角坐标系中横轴数组 数组中每一项代表一条横轴坐标轴,仅有一条时可省略数组,最多同时存在两条数组
                    {
                        type: 'category',               // k线为 category:类目轴,time: 时间轴,value:数值轴,log:对数轴
                        data: data.categoryData,        // 类目数据,在类目轴(type: 'category')中有效。具体展示数据                 
                        min: 'dataMin',                 // 坐标轴刻度最小值。取数据在该轴上的最小值作为最小刻度。
                        max: 'dataMax',                 // 坐标轴刻度最大值。取数据在该轴上的最大值作为最大刻度。
                        boundaryGap : false,            // true: 刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。

                        axisLine: { onZero: false, lineStyle: { color : '#263247', } },     // 坐标轴轴线相关设置。
                        axisTick: { show: false, alignWithLabel: true },                    // 坐标轴刻度相关设置。 因我将两个图表放在一起,所以将k线的x轴刻度线隐藏掉。
                        axisLabel: { show: false },                                         // 坐标轴刻度标签的相关设置。 因我将两个图表放在一起,所以将k线的x轴刻度标签隐藏掉。
                        splitLine: { show: true, lineStyle: { color: '#263247', }, },       // x轴在图表区域展示分割线,x轴为竖线
                        axisPointer: { z: 100, label: { show: false, }, },                  // 因为我将两个图表是连在一起的,所以k线的x轴文本展示关闭掉,否则会重复提示。 
                    },
                    {
                        type: 'category',               // 同上
                        min: 'dataMin',                 // 同上
                        max: 'dataMax',                 // 同上
                        data: data.categoryData,        // 同上
                        gridIndex: 1,                   // 默认为0时,位列x轴所在索引第一位,此时为第二个表所以索引为1.
                        boundaryGap : false,            // 同上

                        axisLine: { onZero: false, lineStyle: { color : '#263247', } },     // 同上
                        axisTick: { show: true, },                                          // 同上
                        axisLabel: { color : '#7286a5', },                                  // 同上
                        splitLine: { show: true, lineStyle: { color: '#263247' } },         // 同上
                        axisPointer: { z: 100 }                                             // 同上
                    }
                ],
                yAxis: [
                    {
                        scale: true,                    // 默认 type 为 value类型, scale只在 type:‘value’中才有效。 是否是脱离 0 值比例 true:坐标刻度不会强制包含零刻度。
                        position: 'right',              // 轴线位置,靠紧某一侧  left  or  right
                        boundaryGap : false,            // true: 刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
                        
                        axisLine: { onZero: false, lineStyle: { color : '#263247', } },     // 同上
                        axisTick: { show: false, },                                         // 同上 刻度不显示
                        axisLabel: { color : '#7286a5', },                                  // 刻度线标签文本设置
                        splitLine: { show: true, lineStyle: { color: '#263247' } },         // y轴在图表区域展示分割线,y轴为横线
                        axisPointer: { z: 100 }                                             // y轴深度,最上层
                    },
                    {
                        scale: true,
                        position: 'right',
                        gridIndex: 1,                   // 默认为0时,位列y轴所在索引第一位,此时为第二个表所以索引为1.
                        splitNumber: 1,                 // 区域展示分割数,默认 5 分割五块
                        boundaryGap : false,            // true: 刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。

                        axisLine: { onZero: false, lineStyle: { color : '#263247', } },     // 坐标轴轴线相关设置。
                        axisTick: { show: false },                                          // 同上 刻度不显示
                        axisLabel: { show: false, color : '#7286a5', },                     // 刻度线标签文本设置
                        splitLine: { show: true, lineStyle: { color: '#263247' } },         // y轴在图表区域展示分割线,y轴为横线
                        axisPointer: { z: 100 }                                             // y轴深度,最上层
                    }
                ],
                dataZoom: [                             // 图表的可拉缩控件
                    {
                        show: false,
                        type: 'inside',
                        xAxisIndex: [0, 1],
                        start: 98,
                        end: 100
                    },
                    {
                        show: false,
                        xAxisIndex: [0, 1],
                        type: 'slider',
                        top: '85%',
                        start: 98,
                        end: 100
                    }
                ],
                series: [
                    {
                        name: coinName,
                        type: 'candlestick',
                        data: data.values,
                        large: true,
                        barMaxWidth: 20,
                        itemStyle: {
                            normal: {
                                color: upColor,
                                color0: downColor,
                                borderColor: null,
                                borderColor0: null
                            }
                        },
                    },
                    {
                        name: 'MA05',
                        type: 'line',
                        data: calculateMA(5, data),
                        smooth: true,
                        symbol: 'none',
                        showSymbol: false,      // 展示线性图表中的链接点
                        itemStyle: {
                            normal: {
                                color: '#f1dc9c',opacity: 1}
                        }
                    },
                    {
                        name: 'MA10',
                        type: 'line',
                        data: calculateMA(10, data),
                        smooth: true,
                        symbol: 'none',         // 线性图表中的链接点样式  'emptyCircle' 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                        showSymbol: false,      // 展示线性图表中的链接点
                        itemStyle: {
                            normal: { color: '#7fcec0', opacity: 1}
                        }
                    },
                    // {
                    //     name: 'MA20',
                    //     type: 'line',
                    //     data: calculateMA(20, data),
                    //     symbol: 'none',         // 线性图表中的链接点样式  'emptyCircle' 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                    //     showSymbol: false,      // 展示线性图表中的链接点
                    //     smooth: true,
                    //     itemStyle: {
                    //         normal: { color: '#3d80cd', opacity: 1}
                    //     }
                    // },
                    {
                        name: 'MA30',
                        type: 'line',
                        data: calculateMA(30, data),
                        symbol: 'none',         // 线性图表中的链接点样式  'emptyCircle' 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                        showSymbol: false,      // 展示线性图表中的链接点
                        smooth: true,
                        itemStyle: {
                            normal: { color: '#c294f7', opacity: 1}
                        }
                    },
                    {
                        name: '交易量',
                        type: 'bar',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        data: data.volumes,
                        barMaxWidth: 20,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList;
                                    if (data.volumes[params.dataIndex][2] < 0) {
                                        colorList = '#c15465';
                                    } else {
                                        colorList = '#4daa90';
                                    }
                                    return colorList;
                                },
                            }
                        }
                    }
                ],
            }, true);

            myChart.dispatchAction({
                type: 'brush',
                areas: [
                    {
                        brushType: 'lineX',
                        coordRange: ['2016-06-02', '2016-06-20'],
                        xAxisIndex: 0
                    }   
                ]
            });
            // });;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
       </script>
  • 0
    点赞
  • 1
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

刘逸宸

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值