前端可视化工具ECharts 学习笔记(二)_针对x轴类型为time的

最新推荐文章于 2024-05-14 06:31:02 发布

lin49940

最新推荐文章于 2024-05-14 06:31:02 发布

阅读量4k

点赞数 1

分类专栏： CSS/HTML相关

本文链接：https://blog.csdn.net/lin49940/article/details/86555145

版权

CSS/HTML相关专栏收录该内容

14 篇文章 0 订阅

订阅专栏

X轴的type 设置为time, X 轴就不需要data 了,

那么serie 的data 必须是二维数组的

[

[1538496443941, 123],

[1538502852702, 234]

]

第一个是时间的长整型, 第二个是对应y 轴的值.

数组1.push(数组2); //数组2 push 2个值, 每次循环数组2要重新new

X轴的显示日期格式必须自己修改,

xAxis: {

type: 'time',

axisLabel: {

interale: 0,

rotate: -40,

formatter: function (value) {

var t_date = new Date(value);

return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('/') + " "

+ [t_date.getHours(), t_date.getMinutes()].join(':');

}

axisPointer: {//y轴上显示指针对应的值

show: true,

效果图:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
  <title>ECharts lin49940 test</title>
 </head>
 <body>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 1600px;height:800px;"></div>

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
    var base = +new Date(2018, 9, 3);
    var oneDay = 24 * 3600 * 1000;//毫米,分钟,小时,天

    var data2 = [];
    var data = [];
    var data12 = [];
    var data22 = [];
    var now = new Date(base);
    var now2 = new Date(base);

    var color1='#f34';
    var    color2 = '#23f';
    function addData(shift) {

        now = new Date(+new Date(now) + Math.random() * 10 * 1000 * 60);
        now2 = new Date(+new Date(now2) + oneDay);
        data12 = new Array();
        data22 = new Array();
        data12.push(now);
        data12.push((Math.random() - 0.4) * 10 + 15);
        data22.push(now);
        data22.push((Math.random() - 0.4) * 40 + 15);
        data.push(data12);
        data2.push(data22);

        if (shift) {
            data.shift();
            data2.shift();
        }
        //alert(now);
        now = new Date(+new Date(now) + Math.random() * 10 * 1000 * 60 );
        now2 = new Date(+new Date(now2) + oneDay);
        //alert(now);
    }
    for (var i = 1; i < 50; i++) {
        addData();
    }
    console.log(data);
    option = {
        title: {
            text: 'lin49940 test'
        },
        legend: {
            //selectedMode: 'single',
            data: ['成交', '成交2']
            //orient:'vertical'    //默认水平方向,这里设置为垂直
        },
        tooltip: {
        },
        toolbox: {
            feature: {
                magicType: {
                    type: ['line','bar']
                },
                dataView: { 
                },
                restore: {},
                saveAsImage: {
                    pixelRatio:2
                }
            }
        },
        grid: {
            bottom: '80px'
        },
        xAxis: {
            type: 'time',
            axisLabel: {
                interale: 0,
                rotate: -40,
                formatter: function (value) {
                    var t_date = new Date(value);
                    return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('/') + " "
                        + [t_date.getHours(), t_date.getMinutes()].join(':');
                }
            },
            axisPointer: {//y轴上显示指针对应的值
                show: true,
            },
        },
        yAxis: [
            {
                name: '销量1',
                type: 'value',
                axisLabel: {//设置Y轴显示值, 自定义需要
                    formatter:'{value}rmb'
                },
                axisLine: {//设置Y轴的颜色
                    lineStyle: {
                        color: color2,
                        width:6,
                    }
                },
                axisPointer: {//y轴上显示指针对应的值
                    show: true,
                    triggerTooltip: false  //不要再有多的提示
                }

            },
            {
                name: '销量2',
                type: 'value',
                position: 'left',
                offset: 70,
                axisLine: {
                    lineStyle: {
                        color: color1,
                        width: 3,
                    }
                },
                axisPointer: {//y轴上显示指针对应的值
                    show: true,
                    triggerTooltip: false
                }
            }
            
        ],
        
        dataZoom: [
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                start: 10,      // 左边在 10% 的位置。
                end: 60         // 右边在 60% 的位置。
            },
            {   // 这个dataZoom组件，默认控制x轴。鼠标滚动变化
                type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                start: 10,      // 左边在 10% 的位置。
                end: 60         // 右边在 60% 的位置。
            },
        ],
        
        series: [
            {
                name: '成交',
                type: 'line',
                smooth: true,
                symbol: 'none',
                ///stack: 'a',
                color: color2,
                data: data,
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter: function (params) {
                            return parseInt(params.value[1]);
                        }
                    }
                }
            },
            {
                name: '成交2',
                type: 'line',
                smooth: true,
                symbol: 'none',           
                //stack: 'a',
                color: color1,
                yAxisIndex:1,
                data: data2,
                showSymbol: false,
                hoverAnimation:false,
            },
            {
                name: '平行于y轴的趋势线',
                type: 'line',
                markLine: {
                    silent: true,
                    data:[
                       { yAxis: 110 }, { yAxis: 220 }, {yAxis:320}
                    ]
                }
            }
        ]
    };
    /*
    setInterval(function () {
        addData(true);
        myChart.setOption({
            xAxis: {
                data: date
            },
            series: [{
                name: '成交',
                data: data
            }]
        });
    }, 500);
    */
    
        // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    myChart.dispatchAction({
        type: 'legendToggleSelect',
        // 图例名称
        name: '成交'
    })

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

lin49940

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
前端可视化工具ECharts 学习笔记(二)_针对x轴类型为time的

X轴的type 设置为time, X 轴就不需要data 了,那么serie 的data 必须是二维数组的[[1538496443941, 123],[1538502852702, 234] ]第一个是时间的长整型, 第二个是对应y 轴的值.数组1.push(数组2); //数组2 push 2个值, 每次循环数组2要重新newX轴的显示日期格式必须自...
复制链接

扫一扫

专栏目录