基于Echarts的股票K线图展示

发布时间：2018-10-31

 

技术：javascript+html5+canvas

 

概述

基于echarts的股票K线图展示，只需引用单个插件，通过简单配置，导入数据，即可实现炫酷复杂的K线图效果。

详细

代码下载：http://www.demodashi.com/demo/14295.html

 

一、概述

这是一个简单的股票K线图展示，利用echarts第三方进行配置，用户可以进行放大缩小查看K线图，还可进行拖拽。

二、演示效果

三、目录结构

其中dist文件夹是echart插件，jquery的引用是为了打开网页后F11自适应全屏

四、详细步骤

1、meta标签配置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

2、文件引用

<script src="dist/echarts.min.js"></script>
<script src="jquery-1.10.1.min.js"></script>

3、添加全局样式，图表容器

 <style>
        *{margin:0;padding:0}
        html,body{

            width:100%;
            height:100%;
        }
        #main{
            width:100%;
            height:100%;
        }
    </style>
    
    <div id="main"></div>
    
    //获取容器，建立实例
    var myChart = echarts.init(document.getElementById('main'))
    myChart.setOption(option);

4、数据格式解释

 var rawData = [
        ['2015/12/31','3570.47','3539.18','-33.69','-0.94%','3538.35','3580.6','176963664','25403106','-'],
        ['2015/12/30','3566.73','3572.88','9.14','0.26%','3538.11','3573.68','187889600','26778766','-'],
        ['2015/12/29','3528.4','3563.74','29.96','0.85%','3515.52','3564.17','182551920','25093890','-'],
        ['2015/12/28','3635.77','3533.78','-94.13','-2.59%','3533.78','3641.59','269983264','36904280','-'],
        ['2015/12/25','3614.05','3627.91','15.43','0.43%','3601.74','3635.26','198451120','27466004','-']
        ]

其中数据格式为数组形式的数组，

各个位置的含义：时间 开盘 关盘 最低点 最高点 MA5 MA10 MA20 MA30，后续的几个MA*的意思的最近*天的日均值

 

5.配置详解

 var option = {
            backgroundColor: '#21202D',
            legend: {
                data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
                inactiveColor: '#777',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false,
                    type: 'cross',
                    lineStyle: {
                        color: '#376df4',
                        width: 2,
                        opacity: 1
                    }
                }
            },
            xAxis: {
                type: 'category',
                data: dates,
                axisLine: { lineStyle: { color: '#8392A5' } }
            },
            yAxis: {
                scale: true,
                axisLine: { lineStyle: { color: '#8392A5' } },
                splitLine: { show: false }
            },
            grid: {
                bottom: 80
            },
            dataZoom: [{
                textStyle: {
                    color: '#8392A5'
                },
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                dataBackground: {
                    areaStyle: {
                        color: '#8392A5'
                    },
                    lineStyle: {
                        opacity: 0.8,
                        color: '#8392A5'
                    }
                },
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }, {
                type: 'inside'
            }],
            animation: false,
            series: [
                {
                    type: 'candlestick',
                    name: '日K',
                    data: data,
                    itemStyle: {
                        normal: {
                            color: '#FD1050',
                            color0: '#0CF49B',
                            borderColor: '#FD1050',
                            borderColor0: '#0CF49B'
                        }
                    }
                },
                {
                    name: 'MA5',
                    type: 'line',
                    data: calculateMA(5, data),
                    smooth: true,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 1
                        }
                    }
                },
                {
                    name: 'MA10',
                    type: 'line',
                    data: calculateMA(10, data),
                    smooth: true,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 1
                        }
                    }
                },
                {
                    name: 'MA20',
                    type: 'line',
                    data: calculateMA(20, data),
                    smooth: true,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 1
                        }
                    }
                },
                {
                    name: 'MA30',
                    type: 'line',
                    data: calculateMA(30, data),
                    smooth: true,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 1
                        }
                    }
                }
            ]
        };

 

tooltip、legend：定制信息提示框的内容样式

xAxis和yAxis表示横坐标和纵坐标的数据设置以及样式，这里是调用了两个map循环进行设置，ES6语法，不懂的同学可以先学习一下，毕竟现在ES6还是一个大趋势。

series：整体配置 其中type很关键 表示该图的类型，

data:图表所用数据，实际项目中大家可以通过http获取数据，再赋值给data。

其中lineStyle表示线条样式设置 areaStyle表示块的样式设置。

最后给大家讲一下运用jquery的全屏配置

setInterval(function () {
            var maxHeight= $(document.body).outerHeight(true);
            $("#main").height(maxHeight);
        },1)

这个要看实际项目中的需要了，有时候需要将屏幕投影的时候全屏肯定是比一个网页要舒服。大家赶紧下载玩玩吧！

 

整体代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>echarts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <script src="dist/echarts.min.js"></script>
    <script src="jquery-1.10.1.min.js"></script>
    <script src="map/js/china.js"></script>
    <style>
        *{margin:0;padding:0}
        html,body{

            width:100%;
            height:100%;
        }
        #main{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <div id="main"></div>
    <script type="text/javascript">
        setInterval(function () {
            var maxHeight= $(document.body).outerHeight(true);
            $("#main").height(maxHeight);
        },1)
        var myChart = echarts.init(document.getElementById('main'));
        var rawData = [['2015/12/31','3570.47','3539.18','-33.69','-0.94%','3538.35','3580.6','176963664','25403106','-'],['2015/12/30','3566.73','3572.88','9.14','0.26%','3538.11','3573.68','187889600','26778766','-'],['2015/12/29','3528.4','3563.74','29.96','0.85%','3515.52','3564.17','182551920','25093890','-'],['2015/12/28','3635.77','3533.78','-94.13','-2.59%','3533.78','3641.59','269983264','36904280','-'],['2015/12/25','3614.05','3627.91','15.43','0.43%','3601.74','3635.26','198451120','27466004','-'],['2015/12/24','3631.31','3612.49','-23.6','-0.65%','3572.28','3640.22','227785216','31542126','-'],['2015/12/23','3653.28','3636.09','-15.68','-0.43%','3633.03','3684.57','298201792','41990292','-'],['2015/12/22','3645.99','3651.77','9.3','0.26%','3616.87','3652.63','261178752','36084604','-'],['2015/12/21','3568.58','3642.47','63.51','1.77%','3565.75','3651.06','299849280','39831696','-'],['2015/12/18','3574.94','3578.96','-1.03','-0.03%','3568.16','3614.7','273707904','36538580','-'