美文网首页
图表

图表

作者: 糖糖_2c32 | 来源:发表于2021-01-20 11:27 被阅读0次
    移动端横屏展示 
    <!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- ECharts单文件引入 -->
    <!-- <script src="file:///android_asset/web/js/echarts.min.js"></script> -->
     <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js?_v_=1609266909542"></script>
    <style>
        table {
            border-collapse: collapse;
        }
        
        table,
        td,
        th {
            border: 1px solid #b0b0b0;
        }
        
        th {
            background-color: green;
            color: white;
        }
        
        #mask {
            display: none;
            background: rgba(0, 0, 0, 0.3);
            z-index: 999999999;
            width: 100%;
            height: 300%;
            position: fixed;
            /*利用固定定位的好处：页面还可以上下翻动，但是始终处于灰色背景下*/
        }
        
        #show {
            display: none;
            background: white;
            width: 90%;
            /* height: 90%; */
            position: fixed;
            left: 45%;
            top: 50%;
            /* padding-bottom: 3%; */
            padding: 0 2% 3%;
            z-index: 999999999;
            transform: translate(-45%, -50%);
        }
        
        #show #close_show {
            position: relative;
            left: 99%;
            top: 1%;
            font-size: 20px;
            z-index: 999999999;
            color: red;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        
        .main {
            transform: rotate(90deg);
            transform-origin: bottom left;
            position: absolute;
            top: -100vw;
            height: 100vw;
            width: 100vh;
        }
    </style>
</head>

<body style="height: 100%;width: 100%; margin: 0">
    <div class="main">
        <!-- 定义一个蒙层 -->
        <div id="mask"></div>
        <!-- 显示放大后的图 -->
        <div id="show">
            <span id="close_show">×</span>
            <div id="enlarge" style="width:100%;height:80%"></div>
        </div>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="lineChart" style="height: 100%;width:100%;padding-top:5%;"></div>
    </div>
    <script type="text/javascript">
        var dom = document.getElementById('lineChart');
        var myChart = echarts.init(dom);
        var app = {};
        var option = null;

        var xAxisData = [
            '00:00', '00:15', '00:30', '00:45','01:00', '01:15', '01:30', '01:45',
            '02:00', '02:15', '02:30', '02:45', '03:00', '03:15', '03:30', '03:45',
            '04:00', '04:15', '04:30', '04:45','05:00', '05:15', '05:30', '05:45',
            '06:00', '06:15', '06:30', '06:45','07:00', '07:15', '07:30', '07:45',
            '08:00', '08:15', '08:30', '08:45','09:00', '09:15', '09:30', '09:45',
            '10:00', '10:15', '10:30', '10:45','11:00', '11:15', '11:30', '11:45',
            '12:00', '12:15', '12:30', '12:45','13:00', '13:15', '13:30', '13:45',
            '14:00', '14:15', '14:30', '14:45','15:00', '15:15', '15:30', '15:45',
            '16:00', '16:15', '16:30', '16:45','17:00', '17:15', '17:30', '17:45',
            '18:00', '18:15', '18:30', '18:45','19:00', '19:15', '19:30', '19:45',
            '20:00', '20:15', '20:30', '20:45','21:00', '21:15', '21:30', '21:45',
            '22:00', '22:15', '22:30', '22:45','23:00', '23:15', '23:30', '23:45', '24:00'
        ];

        var datas = [
            ['00:00', 111],['00:15', 220],['00:30', 130],['00:45', 150],
            ['01:00', 124],['01:15', 120],['01:30', 210],['01:45', 240],
            ['02:00', 139],['02:15', 220],['02:30', 320],['02:45', 250],
            ['03:00', 211],['03:15', 120],['03:30', 310],['03:45', 320],
            ['04:00', 311],['04:15', 210],['04:30', 110],['04:45', 120],
            ['05:00', 151],['05:15', 230],['05:30', 210],['05:45', 240],
            ['06:00', 124],['06:15', 120],['06:30', 310],['06:45', 210],
            ['07:00', 139],['07:15', 230],['07:30', 240],['07:45', 320],
            ['08:00', 131],['08:15', 310],['08:30', 110],['08:45', 150],
            ['09:00', 123],['09:15', 201],['09:30', 320],['09:45', 170],
            ['10:00', 212],['10:15', 209],['10:30', 130],['10:45', 290],
            ['11:00', 141],['11:15', 220],['11:30', 230],['11:45', 250],
            ['12:00', 132],['12:15', 120],['12:30', 330],['12:45', 450],
            ['13:00', 251],['13:15', 201],['13:30', 130],['13:45', 150],
            ['14:00', 113],['14:15', 120],['14:30', 230],['14:45', 250],
            ['15:00', 131],['15:15', 220],['15:30', 130],['15:45', 350],
            ['16:00', 111],['16:15', 320],['16:30', 320],['16:45', 250],
            ['17:00', 142],['17:15', 220],['17:30', 340],['17:45', 150],
            ['18:00', 219],['18:15', 120],['18:30', 130],['18:45', 123],
            ['19:00', 241],['19:15', 320],['19:30', 340],['19:45', 234],
            ['20:00', 123],['20:15', 120],['20:30', 130],['20:45', 123],
            ['21:00', 142],['21:15', 220],['21:30', 350],['21:45', 213],
            ['22:00', 156],['22:15', 320],['22:30', 130],['22:45', 123],
            ['23:00', 241],['23:15', 210],['23:30', 320],['23:45', 150]
        ];

        var datasLast = [
            ['21:00', 11],['21:15', 20],['21:30', 30],['21:45', 50],['22:00', 11],['22:15', 20],
            ['22:30', 30],['22:45', 50],['23:00', 11],['23:15', 20],['23:30', 30],['23:45', 50]
        ];

        var datasNew = [
            ['00:00', 9],['00:15', 10],['00:30', 31],['00:45', 34],['01:00', 21],['01:15', 12],
            ['01:30', 12],['01:45', 43],['02:00', 15],['02:15', 32],['02:30', 32],['02:45', 23],
            ['03:00', 11],['03:15', 23],['03:30', 42],['03:45', 12],['04:00', 11],['04:15', 20],
            ['04:30', 12],['04:45', 21]
        ];

        var dateList = datas.map(function(item) {
            return item[0];
        });
        var valueList = datas.map(function(item) {
            return item[1];
        });
        var dateListNew = datasNew.map(function(item) {
            return item[1];
        });
        var dateListLast = datasLast.map(function(item) {
            return item[1];
        });

        // console.log(getMaxArray(datas));

        function getMaxArray(dataList) {
            var max = dataList[0][1];
            var maxIndex = 0;
            var min = dataList[0][1];
            var minIndex = 0;
            for (var i = 0; i < dataList.length; i++) {
                if (typeof dataList[i][1] !== 'undefined') {
                    if (max < dataList[i][1]) {
                        max = dataList[i][1];
                        maxIndex = i;
                    }
                    if (min > dataList[i][1]) {
                        min = dataList[i][1];
                        minIndex = i;
                    }
                }
            }
            return [
                [dataList[maxIndex][0], max],
                [dataList[minIndex][0], min]
            ];
        }

        function getMaxArrayByList(xAxisList, yAxisList) {
            var max = yAxisList[0];
            var maxIndex = 0;
            var min = yAxisList[0];
            var minIndex = 0;
            var num = 0;
            var numIndex = 0;
            for (var i = 0; i < yAxisList.length; i++) {
                if (max < yAxisList[i]) {
                    max = yAxisList[i];
                    maxIndex = i;
                }
                if (min > yAxisList[i]) {
                    min = yAxisList[i];
                    minIndex = i;
                }
                num += yAxisList[i];
                numIndex = i + 1;
            }
            num = num / numIndex;
            console.log(num + ' , ' + numIndex);
            // console.log(min + ' , ' + dataList[minIndex][0]);
            return [
                [xAxisList[maxIndex], yAxisList[maxIndex]],
                [xAxisList[minIndex], yAxisList[minIndex]],
                [num]
            ];
        }


        option = {
            //title: {
            //    text: '未来一周气温变化',
            //     subtext: '纯属虚构'
            //},
            tooltip: {
                trigger: 'axis',
                // backgroundColor: "rgba(255,255,255,0.8)"
            },
            color: ['#ffcc00', '#33cc00', '#cc0000'],
            // grid: {
            //     containLabel: true,
            //     top: '13%',
            //     bottom: '13%',
            //     left: '13%',
            //     right: '13%'
            // },
            legend: {
                data: ['A相电流', 'B相电流', 'C相电流']
            },
            toolbox: {
                show: true,
                feature: {
                    //自定义图形按钮，需以my开头
                    myButton: {
                        show: true,
                        title: '表格展示',
                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                        onclick: function() {
                            var mask = document.getElementById("mask");
                            var show = document.getElementById("show");
                            var enlarge = document.getElementById("enlarge");
                            mask.style.display = "block";
                            show.style.display = "block";

                            //myChart.getOption()获取当前图形的配置项option
                            var opt = myChart.getOption();
                            var axisData = opt.xAxis[0].data;
                            var series = opt.series;
                            console.log(series[0].data);
                            var aData = getMaxArrayByList(axisData, series[0].data);
                            var bData = getMaxArrayByList(axisData, series[1].data);
                            var cData = getMaxArrayByList(axisData, series[2].data);
                            console.log(aData);
                            var table = '<table style="width:100%;text-align:center;"><tbody><tr>' +
                                '<th>采集因子</th>' +
                                '<th>' + '最大值(A)' + '</th>' +
                                '<th>' + '最大时间' + '</th>' +
                                '<th>' + '最小值(A)' + '</th>' +
                                '<th>' + '最小时间' + '</th>' +
                                '<th>' + '平均值(A)' + '</th>' +
                                '</tr>';
                            table += '<tr>' +
                                '<td>' + series[0].name + '</td>' +
                                '<td>' + aData[0][1] + '</td>' +
                                '<td>' + aData[0][0] + '</td>' +
                                '<td>' + aData[1][1] + '</td>' +
                                '<td>' + aData[1][0] + '</td>' +
                                '<td>' + aData[2][0].toFixed(2) + '</td>' +
                                '</tr>';
                            table += '<tr>' +
                                '<td>' + series[1].name + '</td>' +
                                '<td>' + bData[0][1] + '</td>' +
                                '<td>' + bData[0][0] + '</td>' +
                                '<td>' + bData[1][1] + '</td>' +
                                '<td>' + bData[1][0] + '</td>' +
                                '<td>' + bData[2][0].toFixed(2) + '</td>' +
                                '</tr>';
                            table += '<tr>' +
                                '<td>' + series[2].name + '</td>' +
                                '<td>' + cData[0][1] + '</td>' +
                                '<td>' + cData[0][0] + '</td>' +
                                '<td>' + cData[1][1] + '</td>' +
                                '<td>' + cData[1][0] + '</td>' +
                                '<td>' + cData[2][0].toFixed(2) + '</td>' +
                                '</tr>';
                            // console.log(series[0].data);

                            table += '</tbody></table>';
                            enlarge.innerHTML = table;
                            console.log(show.outerWidth);

                            var close_show = document.getElementById("close_show");
                            close_show.addEventListener('click', function() {
                                console.log('----------');
                                mask.style.display = "none";
                                show.style.display = "none";
                            });
                        }
                    },
                    // dataZoom: {
                    //     yAxisIndex: 'none'
                    // },
                    // dataView: {
                    //     readOnly: false
                    // },
                    dataView: {
                        show: true,
                        title: '数据视图',
                        readOnly: true,
                    },
                    magicType: {
                        type: ['line', 'bar']
                    },
                    restore: {},
                    // saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxisData
            },
            yAxis: {
                name: '单位(A)',
                type: 'value',
            },
            series: [{
                name: 'A相电流',
                type: 'line',
                smooth: true,
                data: valueList,
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            }, {
                name: 'B相电流',
                type: 'line',
                smooth: true,
                data: dateListNew,
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }, ]
                }
            }, {
                name: 'C相电流',
                type: 'line',
                smooth: true,
                data: dateListLast,
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }, ]
                }
            }, {
                type: 'line',
                markArea: {
                    data: [
                        [{
                            name: '谷',
                            xAxis: '00:00',
                            //区域的颜色
                            itemStyle: {
                                color: "rgba(255, 0, 0, 0.05)"
                            },
                            //字‘谷’的颜色
                            // label: {
                            //     color: 'rgba(255, 0, 0, 0.05)'
                            // }
                        }, {
                            xAxis: '08:00'
                        }],
                        [{
                            name: '尖',
                            xAxis: '08:00',
                            itemStyle: {
                                color: 'rgba(51, 153, 255, 0.05)'
                            }
                        }, {
                            xAxis: '12:00'
                        }],
                        [{
                            name: '峰',
                            xAxis: '12:00',
                            itemStyle: {
                                color: "rgba(255, 0, 0, 0.05)"
                            },
                        }, {
                            xAxis: '21:00'
                        }],
                        [{
                            name: '平',
                            xAxis: '21:00',
                            itemStyle: {
                                color: 'rgba(51, 153, 255, 0.05)'
                            }
                        }, {
                            xAxis: '24:00'
                        }]
                    ]
                }
            }, ]
        };


        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

        function resetNull() {
            //option.series = [];
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }
    </script>

</body>

</html>
    浏览器展示 
    <!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- ECharts单文件引入 -->
    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js?_v_=1609266909542"></script>
</head>

<body style="height: 100%; margin: 0">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="lineChart" style="height: 100%"></div>
    <script type="text/javascript">
        var dom = document.getElementById('lineChart');
        var myChart = echarts.init(dom);
        var app = {};
        var option = null;

        var xAxisData = [
            '00:00', '00:15', '00:30', '00:45',
            '01:00', '01:15', '01:30', '01:45',
            '02:00', '02:15', '02:30', '02:45',
            '03:00', '03:15', '03:30', '03:45',
            '04:00', '04:15', '04:30', '04:45',
            '05:00', '05:15', '05:30', '05:45',
            '06:00', '06:15', '06:30', '06:45',
            '07:00', '07:15', '07:30', '07:45',
            '08:00', '08:15', '08:30', '08:45',
            '09:00', '09:15', '09:30', '09:45',
            '10:00', '10:15', '10:30', '10:45',
            '11:00', '11:15', '11:30', '11:45',
            '12:00', '12:15', '12:30', '12:45',
            '13:00', '13:15', '13:30', '13:45',
            '14:00', '14:15', '14:30', '14:45',
            '15:00', '15:15', '15:30', '15:45',
            '16:00', '16:15', '16:30', '16:45',
            '17:00', '17:15', '17:30', '17:45',
            '18:00', '18:15', '18:30', '18:45',
            '19:00', '19:15', '19:30', '19:45',
            '20:00', '20:15', '20:30', '20:45',
            '21:00', '21:15', '21:30', '21:45',
            '22:00', '22:15', '22:30', '22:45',
            '23:00', '23:15', '23:30', '23:45', '24:00'
        ];

        var datas = [
            ['00:00', 111],
            ['00:15', 220],
            ['00:30', 130],
            ['00:45', 150],
            ['01:00', 124],
            ['01:15', 120],
            ['01:30', 210],
            ['01:45', 240],
            ['02:00', 139],
            ['02:15', 220],
            ['02:30', 320],
            ['02:45', 250],
            ['03:00', 211],
            ['03:15', 120],
            ['03:30', 310],
            ['03:45', 320],
            ['04:00', 311],
            ['04:15', 210],
            ['04:30', 110],
            ['04:45', 120],
            ['05:00', 151],
            ['05:15', 230],
            ['05:30', 210],
            ['05:45', 240],
            ['06:00', 124],
            ['06:15', 120],
            ['06:30', 310],
            ['06:45', 210],
            ['07:00', 139],
            ['07:15', 230],
            ['07:30', 240],
            ['07:45', 320],
            ['08:00', 131],
            ['08:15', 310],
            ['08:30', 110],
            ['08:45', 150],
            ['09:00', 123],
            ['09:15', 201],
            ['09:30', 320],
            ['09:45', 170],
            ['10:00', 212],
            ['10:15', 209],
            ['10:30', 130],
            ['10:45', 290],
            ['11:00', 141],
            ['11:15', 220],
            ['11:30', 230],
            ['11:45', 250],
            ['12:00', 132],
            ['12:15', 120],
            ['12:30', 330],
            ['12:45', 450],
            ['13:00', 251],
            ['13:15', 201],
            ['13:30', 130],
            ['13:45', 150],
            ['14:00', 113],
            ['14:15', 120],
            ['14:30', 230],
            ['14:45', 250],
            ['15:00', 131],
            ['15:15', 220],
            ['15:30', 130],
            ['15:45', 350],
            ['16:00', 111],
            ['16:15', 320],
            ['16:30', 320],
            ['16:45', 250],
            ['17:00', 142],
            ['17:15', 220],
            ['17:30', 340],
            ['17:45', 150],
            ['18:00', 219],
            ['18:15', 120],
            ['18:30', 130],
            ['18:45', 123],
            ['19:00', 241],
            ['19:15', 320],
            ['19:30', 340],
            ['19:45', 234],
            ['20:00', 123],
            ['20:15', 120],
            ['20:30', 130],
            ['20:45', 123],
            ['21:00', 142],
            ['21:15', 220],
            ['21:30', 350],
            ['21:45', 213],
            ['22:00', 156],
            ['22:15', 320],
            ['22:30', 130],
            ['22:45', 123],
            ['23:00', 241],
            ['23:15', 210],
            ['23:30', 320],
            ['23:45', 150],
        ];

        var datasLast = [
            ['21:00', 11],
            ['21:15', 20],
            ['21:30', 30],
            ['21:45', 50],
            ['22:00', 11],
            ['22:15', 20],
            ['22:30', 30],
            ['22:45', 50],
            ['23:00', 11],
            ['23:15', 20],
            ['23:30', 30],
            ['23:45', 50]
        ];

        var datasNew = [
            ['00:00', 9],
            ['00:15', 10],
            ['00:30', 31],
            ['00:45', 34],
            ['01:00', 21],
            ['01:15', 12],
            ['01:30', 12],
            ['01:45', 43],
            ['02:00', 15],
            ['02:15', 32],
            ['02:30', 32],
            ['02:45', 23],
            ['03:00', 11],
            ['03:15', 23],
            ['03:30', 42],
            ['03:45', 12],
            ['04:00', 11],
            ['04:15', 20],
            ['04:30', 12],
            ['04:45', 21]
        ];

        var dateList = datas.map(function(item) {
            return item[0];
        });
        var valueList = datas.map(function(item) {
            return item[1];
        });
        var dateListNew = datasNew.map(function(item) {
            return item[1];
        });
        var dateListLast = datasLast.map(function(item) {
            return item[1];
        });

        option = {
            //title: {
            //    text: '未来一周气温变化',
            //     subtext: '纯属虚构'
            //},
            tooltip: {
                trigger: 'axis'
            },
            color: ['#ffcc00', '#33cc00', '#cc0000'],
            legend: {
                data: ['A相电流', 'B相电流', 'C相电流']
            },
            toolbox: {
                show: true,
                feature: {
                    myButton: {
                        show: true,
                        title: '自定义扩展方法1',
                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                        onclick: function() {
                            var imgChart = echarts.init(document.getElementById('lineChart'));
                            // imgChart.clear();
                            //myChart.getOption()获取当前图形的配置项option
                            // imgChart.setOption(myChart.getOption());
                        }
                    },
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    // dataView: {
                    //     readOnly: false
                    // },
                    dataView: {
                        show: true,
                        title: '数据视图',
                        readOnly: true,
                        // optionToContent: function(opt) {
                        //     var axisData = opt.yAxis[0].data;
                        //     console.log(axisData);
                        //     var series = opt.series;
                        //     var table = '<table class="dataViewTable"><tbody><tr class="dataViewTr">' +
                        //         '<td class="dataViewHead">' + '记录要点' + '</td>' +
                        //         '<td class="dataViewHead">' + '完成进度' + '</td>' +
                        //         '</tr>';
                        //     for (var i = 0, l = axisData.length; i < l; i++) {
                        //         table += '<tr class="dataViewTr">' +
                        //             '<td class="dataViewTd">' + axisData[i] + '</td>' +
                        //             '<td class="dataViewTd">' + series[0].data[i] + '</td>' +
                        //             '</tr>';
                        //     }
                        //     table += '</tbody></table>';
                        //     return table;
                        // }
                    },
                    magicType: {
                        type: ['line', 'bar']
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxisData
            },
            yAxis: {
                name: '单位(A)',
                type: 'value',
            },
            series: [{
                name: 'A相电流',
                type: 'line',
                smooth: true,
                data: valueList,
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            }, {
                name: 'B相电流',
                type: 'line',
                smooth: true,
                data: dateListNew,
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }, ]
                }
            }, {
                name: 'C相电流',
                type: 'line',
                smooth: true,
                data: dateListLast,
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }, ]
                }
            }, {
                type: 'line',
                markArea: {
                    data: [
                        [{
                            name: '谷',
                            xAxis: '00:00',
                            //区域的颜色
                            itemStyle: {
                                color: "rgba(255, 0, 0, 0.05)"
                            },
                            //字‘谷’的颜色
                            label: {
                                color: 'rgba(255, 0, 0, 0.05)'
                            }
                        }, {
                            xAxis: '08:00'
                        }],
                        [{
                            name: '尖',
                            xAxis: '08:00',
                            itemStyle: {
                                color: 'rgba(51, 153, 255, 0.05)'
                            }
                        }, {
                            xAxis: '12:00'
                        }],
                        [{
                            name: '峰',
                            xAxis: '12:00',
                            itemStyle: {
                                color: "rgba(255, 0, 0, 0.05)"
                            },
                        }, {
                            xAxis: '21:00'
                        }],
                        [{
                            name: '平',
                            xAxis: '21:00',
                            itemStyle: {
                                color: 'rgba(51, 153, 255, 0.05)'
                            }
                        }, {
                            xAxis: '24:00'
                        }]
                    ]
                }
            }, ]
        };


        function createChart(type, json1, sign) {
            option.yAxis = [];
            option.yAxis.push({
                'axisLabel': {
                    'formatter': '{value}' + sign,
                    'show': true,
                    'textStyle': {
                        'color': '#333',
                        'fontSize': 8,
                        'fontWeight': 'bold'
                    }
                },
                'axisLine': {
                    'lineStyle': {
                        'color': '#333'
                    }
                },
                'axisTick': {
                    'alignWithLabel': false,
                    'show': false
                },
                'scale': true,
                'type': 'value',
            });
            option.series.push({
                'smooth': true,
                'name': json1.name,
                'type': 'line',
                'data': json1.data //温度数据
            });
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>

</body>

</html>

    相关文章

      网友评论

          本文标题：图表

          本文链接：https://www.haomeiwen.com/subject/ozzhzktx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|图表|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！