Echarts学习记录——不等距折线图

最新推荐文章于 2024-08-13 18:13:57 发布

-贫寒豌豆

最新推荐文章于 2024-08-13 18:13:57 发布

阅读量1w

点赞数 1

分类专栏： Echarts 文章标签： Echarts 折线图区间折线图

本文链接：https://blog.csdn.net/flygoa/article/details/73090369

版权

Echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Echarts学习记录——不等距折线图

需求

横坐标为一个区间，折线的每个点在区间内展示。
如横坐标是24小时的时间点，其中展示每个小时内某个时间点的数值。如下图：

说明

设置【横坐标】xAxis的【类型】type为【time】类型。
设置【横坐标】的值并格式化显示格式。
设置【纵坐标】yAxis，最大值，最小值，分行，背景色等
设置【数据驱动】series，主要设置data为一个二维数组，第一个元素是时间节点，第二个元素是数值。

源代码

使用的CDN，所以代码可直接运行查看。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>不等距折线图</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.7.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.6.1/echarts.min.js"></script>

</head>
<body>
    <div id="main" style="height:400px"></div>
    <script type="text/javascript">
        //图表
        var myChart;
        //图表参数
        var option;

        $(function(){
            //创建Echarts
            myChart = echarts.init(document.getElementById('main')); 
            //初始化图表选项
            initOption();
            // 为echarts对象加载图表选项
            myChart.setOption(option); 
        })

        //初始化Option
        function initOption(){
            option = {
                //设置标题
                title : {
                    text : '不等距折线图',
                },
                //设置鼠标移动到节点上时显示的内容
                tooltip : {
                    trigger: 'item',//触发类型 'item' | 'axis' 
                    formatter : function (params) { //内容格式器：
                        var date = new Date(params.value[0]);
                        data = date.getHours() + ':'
                               + date.getMinutes();
                        return "时间："+data + '<br/>'+ "数值："+params.value[1];
                    }
                },
                //设置图例，与折线名称相对应
                legend : {
                    data : ['随机数值']
                },
                //设置边框
                grid: {
                    x : 40,
                    y : 60,
                    x2: 20,
                    y2: 60
                },
                //设置横坐标
                xAxis : [
                    {
                        axisLabel :{
                            textStyle:{
                                color: '#333'
                            },
                            //设置x轴显示样式
                            formatter:function(params){
                                var date = new Date(params);
                                return date.getHours()+":00";
                            }
                        },
                        type : 'time',
                        data : (function(){
                            var d = [];
                            var i = -1 ;
                            while(i++ < 24){
                                d.push(new Date(2017, 9, 1, i,0,0));
                            }
                            return d;
                        })(),
                        min: new Date(2017, 9, 1, 0,0,0),
                        max: new Date(2017, 9, 2, 0,0,0),   
                        splitLine:{show:true},
                        splitNumber:25
                    }
                ],
                //设置纵坐标
                yAxis : [
                    {
                        type : 'value',
                        min: 0,
                        max: 100,   
                        splitArea:{show:true,
                            areaStyle:{color:['#008000',
                                    '#99CC00',
                                    '#FFFF00',
                                    '#FF9900',
                                    '#FF0000']}
                        },
                        splitLine:{show:false},
                        splitNumber:5
                    }
                ],
                //设置数据驱动
                series : [
                    {
                        name: '随机数值',
                        type: 'line',
                        //图标大小，根据值进行计算
                        symbolSize: function (value){
                            return Math.round(value[1]/10) + 4;
                        },
                        data: (function () {
                            var d = [];
                            var len = -1;
                            while (len++ < 23) {
                                var timeDate = new Date(2017, 9, 1, len,(Math.random()*30).toFixed(0),0);//时间 2017 10 1 
                                var randomNum = (Math.random()*100).toFixed(2);//100以内随机数，保留两位小数
                                //如果数据格式为'-',则折线表示为断点
                                if(len == 5){
                                    randomNum = '-';
                                }
                                d.push([timeDate,randomNum]);
                            }
                            return d;
                        })()
                    }
                ]
            };
        }

    </script>
</body>