基于ECharts 图标JS库创建Demo

效果:

首先要到 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>

来源：网络

智能推荐

echarts.min.js下载

echarts.min.js下载 1. 请求echarts.min.js下载网址：https://echarts.baidu.com/download.html 2. 点击 "在线定制" 按钮 3. 向下拖动页面，点击 "下载" 按钮进行下载执行到此步说明echarts.min.js已经下载成功了。。。...

echarts.js官网

echarts.js 官网 http://echarts.baidu.com/ 效果：代码：效果2： code:...

基于SuperMap的Echarts迁徙图

基于SuperMap的Echarts迁徙图前提：对SuperMap有一定了解一、用法 1、引入相关js <scriptsrc="./../js/jquery.min.js"></script> ...

基于Echarts的炫酷图表

基于Echarts的炫酷图表前言：我从接触开发(大一)到现在工作也有个小5年左右了，对于Echarts也比较熟悉。最近发现项目里的一个柱状图我感觉很好看，然后我就去Echarts官网中找了一下，发现找不到类似的；最后问同事才知道是另一个基于Echarts扩展的网站中的demo——Make A Pie；像是发现新大陆一般，这里的图表demo比Echarts官网中的帅了不知道...

百度Echarts的echarts.min.js下载

1、首先进入该网址https://echarts.baidu.com/download.html，滑动到在线定制。 2、进入在线定制，然后选择要打包的图表（可不选默认）。 3、重要！！！！点击页面末的下载（注意若勾选了“代码压缩”，下载下来的为echarts.min.js；如果没有选中“代码压缩”，下载下来的是echarts.js）。...

猜你喜欢

jeecg-boot之echarts Demo

1、在项目下terminal安装依赖 npm install echarts -S 2、在WebStorm src/main.js中全局引入 3、编写代码，在mounted函数中调用echart的实例...

DTO vs. Assembly We probably need to make a strong statement about data transfer objects. Do we like or hate them? Well, it depends. DTOs are an excellent tool for explaining to kids the difference be...

cmd下编译执行arm汇编文件

首先新建一个.s为后缀名的汇编文件，然后再里面写入内容。area example,code,readonly等，你们懂的了。第二步在cmd下输入armasm查看提示信息，也确保你能够在cmd下编译arm汇编。如果提示命令不存在，你还得先装个ads,恰好我写了个ads免安装教程。免安装其实用到后面会出问题，注册表没有信息，axd会用不了，但是这也是几个月后的事了。输入armasm,会出现如...

链表的头尾倒置的一种方法

链表的头尾倒置用的方法其实使用的就是链表的头插入法。我们在利用头插法生成一个链表时候，会发现最先插入的数据，往往会把它放到链表数据的尾端。因此我们可以利用这个性质把链表元素再进行一次头插法，这样可以实现链表的头尾倒置。具体方法。设置两个新的指针，分别指向元素的首个结点和首结点的下个结点。这样的话在头结点后面打断链表的...

什么是任播

1 任播任播：将任播报文至少传输到一个具有任播地址的主机，最好仅仅传输到一个主机，改善网络负载拓扑，较好地分摊网络负载，提高网络服务的范围和服务质量，使网络资源得到合理利用；应用范围：站点镜像、复制主机、DNS、NTP(Network Time Protocol，网络时间协议)等；应用单播？组播？广播？...

基于ECharts 图标JS库创建Demo

效果:

智能推荐

echarts.min.js下载

echarts.js官网

基于SuperMap的Echarts迁徙图

基于Echarts的炫酷图表

百度Echarts的echarts.min.js下载

猜你喜欢

jeecg-boot之echarts Demo

DTO vs. Assembly（转载）

cmd下编译执行arm汇编文件

链表的头尾倒置的一种方法

什么是任播

问答精选

SVN update does not work

directory_v1 always returns 403 from a cloud function

How to rewrite theme path using .htaccess?

Are spurios wakeups accompanied by an InterruptedException?

Getting thumbnail for trimmed video in swift

相关问题

相关文章

热门文章

推荐文章

相关标签

推荐问答