基于ECharts 图标JS库创建Demo

最新推荐文章于 2023-02-01 09:30:12 发布

Byte_Dance

最新推荐文章于 2023-02-01 09:30:12 发布

阅读量579

点赞数

分类专栏： JS ECharts

JS 同时被 2 个专栏收录

72 篇文章 1 订阅

订阅专栏

ECharts

1 篇文章 0 订阅

订阅专栏

效果:

首先要到 ECharts 官网上下载 ECharts.js 这个包

传送门 : http://www.echartsjs.com/download.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
    // 0:基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 1:设置变量
    var upColor = '#ec0000';
    var upBorderColor = '#8A0000';
    var downColor = '#00da3c';
    var downBorderColor = '#008F28';

    var dataCount = 2e5;
    var data = generateOHLC(dataCount);

    myChart.setOption(
        //2:指定图表的配置项和数据
        option = {
            dataset: {
                source: data
            },
            title: {
                text: 'Data Amount: ' + echarts.format.addCommas(dataCount)
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                }
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: false
                    },
                }
            },
            grid: [
                {
                    left: '10%',
                    right: '10%',
                    bottom: 200
                },
                {
                    left: '10%',
                    right: '10%',
                    height: 80,
                    bottom: 80
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    scale: true,
                    boundaryGap : false,
                    // inverse: true,
                    axisLine: {onZero: false},
                    splitLine: {show: false},
                    splitNumber: 20,
                    min: 'dataMin',
                    max: 'dataMax'
                },
                {
                    type: 'category',
                    gridIndex: 1,
                    scale: true,
                    boundaryGap : false,
                    axisLine: {onZero: false},
                    axisTick: {show: false},
                    splitLine: {show: false},
                    axisLabel: {show: false},
                    splitNumber: 20,
                    min: 'dataMin',
                    max: 'dataMax'
                }
            ],
            yAxis: [
                {
                    scale: true,
                    splitArea: {
                        show: true
                    }
                },
                {
                    scale: true,
                    gridIndex: 1,
                    splitNumber: 2,
                    axisLabel: {show: false},
                    axisLine: {show: false},
                    axisTick: {show: false},
                    splitLine: {show: false}
                }
            ],
            dataZoom: [
                {
                    type: 'inside',
                    xAxisIndex: [0, 1],
                    start: 10,
                    end: 100
                },
                {
                    show: true,
                    xAxisIndex: [0, 1],
                    type: 'slider',
                    bottom: 10,
                    start: 10,
                    end: 100,
                    handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.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: '105%'
                }
            ],
            visualMap: {
                show: false,
                seriesIndex: 1,
                dimension: 6,
                pieces: [{
                    value: 1,
                    color: upColor
                }, {
                    value: -1,
                    color: downColor
                }]
            },
            series: [
                {
                    type: 'candlestick',
                    itemStyle: {
                        color: upColor,
                        color0: downColor,
                        borderColor: upBorderColor,
                        borderColor0: downBorderColor
                    },
                    encode: {
                        x: 0,
                        y: [1, 4, 3, 2]
                    }
                },
                {
                    name: 'Volumn',
                    type: 'bar',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    itemStyle: {
                        color: '#7fbe9e'
                    },
                    large: true,
                    encode: {
                        x: 0,
                        y: 5
                    }
                }
            ]
        }
    )
    //3:设置可调用函数
    function generateOHLC(count) {
        var data = [];

        var xValue = +new Date(2011, 0, 1);
        var minute = 60 * 1000;
        var baseValue = Math.random() * 12000;
        var boxVals = new Array(4);
        var dayRange = 12;

        for (var i = 0; i < count; i++) {
            baseValue = baseValue + Math.random() * 20 - 10;

            for (var j = 0; j < 4; j++) {
                boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
            }
            boxVals.sort();

            var idxRandom = Math.random();
            var openIdx = Math.round(Math.random() * 3);
            var closeIdx = Math.round(Math.random() * 2);
            if (closeIdx === openIdx) {
                closeIdx++;
            }
            var volumn = boxVals[3] * (1000 + Math.random() * 500);

            // ['open', 'close', 'lowest', 'highest', 'volumn']
            // [1, 4, 3, 2]
            data[i] = [
                echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', xValue += minute),
                +boxVals[openIdx].toFixed(2), // open
                +boxVals[3].toFixed(2), // highest
                +boxVals[0].toFixed(2), // lowest
                +boxVals[closeIdx].toFixed(2),  // close
                volumn.toFixed(0),
                getSign(data, i, +boxVals[openIdx], +boxVals[closeIdx], 4) // sign
            ];
        }

        return data;

        function getSign(data, dataIndex, openVal, closeVal, closeDimIdx) {
            var sign;
            if (openVal > closeVal) {
                sign = -1;
            }
            else if (openVal < closeVal) {
                sign = 1;
            }
            else {
                sign = dataIndex > 0
                    // If close === open, compare with close of last record
                    ? (data[dataIndex - 1][closeDimIdx] <= closeVal ? 1 : -1)
                    // No record of previous, set to be positive
                    : 1;
            }

            return sign;
        }
    }

</script>
</body>
</html>

Byte_Dance

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于ECharts 图标JS库创建Demo

效果: 首先要到 ECharts 官网上下载 ECharts.js 这个包传送门 : http://www.echartsjs.com/download.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&amp
复制链接

扫一扫