echarts-魔改

已于 2022-11-23 16:54:55 修改
阅读量179 收藏
点赞数
分类专栏： echarts 文章标签： echarts 前端 javascript
于 2021-12-07 14:23:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web_liudong/article/details/121768315
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <div id="app" v-cloak>
      <div id="day" style="height: 22vh;"></div>
     <div>
</body>
<script>
    new Vue({
        el: '#app',
        // 获取
        data() {
            return {
            }
        },
        mounted() {
            this.IsPC()
            if (this.IsPC() == true) {
                this.flag = true
            } else {
                this.flag = false
            }
            this.getDayDataList()
            this.getMonthDataList()
        },
        methods: {
            IsPC() {
                var userAgentInfo = navigator.userAgent;
                var Agents = ["Android", "iPhone",
                    "SymbianOS", "Windows Phone",
                    "iPad", "iPod"
                ];
                var flag = true;
                for (var v = 0; v < Agents.length; v++) {
                    if (userAgentInfo.indexOf(Agents[v]) > 0) {
                        flag = false;
                        break;
                    }
                }
                return flag;
            },

            drawDayTotalSleep(data, value, c) {

                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('day1'))
                var aa = 'Awake'
                var bb = 'Light'
                var cc = 'Deep'
                var days = ['Deep', 'Light', 'Awake',];
                if (data.length != 0) {
                    data = data.map(function (item) {
                        return [item[0], item[1], item[2] || '-'];
                    });

                    if (data[data.length - 1][2] == 3) {
                        data.pop()
                    }
                }

                // 绘制图表
                myChart.setOption({
                    title: {
                        show: c,
                        text: 'No Data',
                        left: 'center',
                        top: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                            fontWeight: 400
                        }
                    },
                    grid: {
                        top: '5%',
                        left: '2%',
                        right: '5%',
                        bottom: '1%',
                        containLabel: true
                    },
                    legend: {
                        // orient: 'vertical',
                        icon: "circle",
                        x: '60%',
                        y: "center",
                        data: ['Awake', 'Light', 'Deep'],
                        itemGap: 40,
                        selectedMode: false,
                        textStyle: {
                            color: '#ffffff',

                        }
                    },
                    tooltip: {
                        // 触发器
                        trigger: "axis",
                        axisPointer: {
                            type: 'line',
                        },
                        // formatter:'{c}%'
                        formatter(params) {
                            var a = '<div><p>' + params[0].name + '</p></div>'
                            for (var i = 0; i < params.length; i++) {
                                if (params[i].value[2] == 1) {
                                    params[i].value[2] = aa
                                }
                                if (params[i].value[2] == 2) {
                                    params[i].value[2] = bb
                                }
                                if (params[i].value[2] == 3) {
                                    params[i].value[2] = cc
                                }
                                a += '<p>' + params[i].marker + params[i].value[2] + '</p>';
                            }
                            return a;
                        }
                    },

                    animation: false,

                    xAxis: {
                        type: 'category',
                        data: value,
                        show: this.sleepStageDisFlag,
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#D8D8DB"
                            }
                        },
                        axisLine: {
                            show: true,
                            axisTick: {
                                show: false
                            },

                            lineStyle: {
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                    },
                    yAxis: [{
                        type: 'category',
                        data: days,
                        show: this.sleepStageDisFlag,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#D8D8DB"
                            }
                        },
                        axisLine: {
                            show: true,
                            axisTick: {
                                show: false
                            },

                            lineStyle: {
                                type: 'dashed',
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                    },
                    {
                        type: 'category',
                        data: days,
                        show: this.sleepStageDisFlag,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            show:false,
                            textStyle: {
                                color: "#D8D8DB"
                            }
                        },
                        axisLine: {
                            show: true,
                            axisTick: {
                                show: false
                            },

                            lineStyle: {
                                type: 'dashed',
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                    }],
                    visualMap: {
                        min: 1,
                        max: 3,
                        show: false,
                        calculable: false,
                        orient: 'horizontal',

                        left: 'center',
                        bottom: '10%',
                        //自定义热力图颜色
                        inRange: {
                            color: ['#6B5CAD', '#4197B5', '#AFB3C0']
                        }
                    },
                    series: [{
                        name: 'Punch Card',
                        type: 'heatmap',
                        barWidth: '50',
                        data: data,
                    },
             ]
                });
            },
            // 
            drawHeartRate(a, b, c) {
               
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('day2'))
                // 绘制图表
                let sleepStr1 = 'Asleep'
               let sleepStr2 = 'Asleep'
               let awakeStr = 'Awake'
               if(this.commonChartsTomorrowSleepTime == ''){
                sleepStr1 = ''
               }  
               if(this.commonChartsSleepTime == ''){
                sleepStr2 = ''
               } if(this.commonChartsWakeTime == ''){
                awakeStr = ''
               }     
                myChart.setOption({
                    title: {
                        show: c,
                        text: 'No Data',
                        left: 'center',
                        top: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                            fontWeight: 400
                        }
                    },
                    grid: {
                        top: '15%',
                        left: '4%',
                        right: '1%',
                        bottom: '1%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'dotted'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#D8D8DB"
                            }
                        },
                        axisLine: {
                            show: false,
                            axisTick: {
                                show: false
                            },

                            lineStyle: {
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                        data: a

                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                        show:!c,
                        min:0,
                        max:100,
                        // boundaryGap : [ 0, 0.1 ],
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#AFB3C0"
                            }
                        },
                        axisLine: {
                            show: false,
                            axisTick: {
                                show: false
                            },
                            lineStyle: {
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                    },
                    tooltip: {
                        // 触发器
                        trigger: "axis",
                        axisPointer: {
                            type: 'none',
                        },
                        renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
                        backgroundColor: ' #525466', // 提示框浮层的背景颜色。
                        // formatter:'{c}%'
                        formatter(params) {
                            var a = ''
                            for (var i = 0; i < params.length; i++) {
                                a += '<p>'+ params[i].value + '</p>';
                            }
                            return a;
                        }
                    },
                    series: [{
                        name: '销量',
                        type: 'line',
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                color: '#fff',
                                lineStyle: {
                                    color: 'rgba(208, 77, 77, 0.75)'
                                }
                            }
                        },
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(208, 77, 77, 0.75)'
                            }, {
                                offset: 1,
                                color: 'rgba(208, 77, 77, 0)'
                            }])
                        },
                        data: b
                    },
                    {
                        name: '平行于y轴的趋势线',
                        type: 'line',
                        markLine: {
                            lineStyle: {
                                width: 1,
                                color: 'gray',
                            },
                            name: 'aa',
                            symbol: 'none',
                            data: [[
                                { coord: [b[0], 0] },
                                { coord: [b[b.length-1], 100] }//如何获取grid上侧最大值，目前是写死的
                            ], [
                                { coord: [a[a.length - 1], 0] },
                                { coord: [a[a.length - 1], 100] }
                            ],
                            [
                                { coord: [this.mob_total_timeflag2, 0] ,name:this.mob_total_timeflag2},
                                { coord: [this.mob_total_timeflag2, 100],name:this.mob_total_timeflag2 }
                            ],
                            [
                                { coord: [this.commonChartsWakeTime, 0], name: awakeStr  + '\n' + this.commonChartsWakeTime },
                                { coord: [this.commonChartsWakeTime, 100] }
                            ],
                            [
                                { coord: [this.commonChartsSleepTime, 0], name:sleepStr2  + '\n' + this.commonChartsSleepTime },
                                { coord: [this.commonChartsSleepTime, 100] }
                            ],
                            // [
                            //     { coord: [this.commonChartsTomorrowSleepTime, 0], name:sleepStr1  + '\n' + this.commonChartsTomorrowSleepTime },
                            //     { coord: [this.commonChartsTomorrowSleepTime, 100] }
                            // ],
                        ]
                        }
                    }
                    ]
                });
            }
            
            drawRespirtoryRate(a, b, c) {
                // console.log(a,b)
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('day3'))
                // 绘制图表
                let sleepStr1 = 'Asleep'
               let sleepStr2 = 'Asleep'
               let awakeStr = 'Awake'
               if(this.commonChartsTomorrowSleepTime == ''){
                sleepStr1 = ''
               }  
               if(this.commonChartsSleepTime == ''){
                sleepStr2 = ''
               } if(this.commonChartsWakeTime == ''){
                awakeStr = ''
               }     
                myChart.setOption({
                    title: {
                        show: c,
                        text: 'No Data',
                        left: 'center',
                        top: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                            fontWeight: 400
                        }
                    },
                    grid: {
                        top: '15%',
                        left: '6%',
                        right: '1%',
                        bottom: '1%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'dotted'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#D8D8DB"
                            }
                        },
                        axisLine: {
                            show: false,
                            axisTick: {
                                show: false
                            },

                            lineStyle: {
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                        data: a

                    },
                    yAxis: {
                        type: 'value',
                        show:!c,
                        min:0,
                        max:25,
                        minInterval: 1,
                        // boundaryGap : [ 0, 0.1 ],
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#AFB3C0"
                            }
                        },
                        axisLine: {
                            show: false,
                            axisTick: {
                                show: false
                            },
                            lineStyle: {
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                    },
                    tooltip: {
                        // 触发器
                        trigger: "axis",
                        axisPointer: {
                            type: 'none',
                        },
                        renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
                        backgroundColor: ' #525466', // 提示框浮层的背景颜色。
                        // formatter:'{c}%'
                        formatter(params) {
                            var a = ''
                            for (var i = 0; i < params.length; i++) {
                                a += '<p>'+ params[i].value
                                     + '</p>';
                            }
                            return a;
                        }
                    },
                    series: [{
                        name: '销量',
                        type: 'line',
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                color: '#fff',
                                lineStyle: {
                                    color: 'rgba(45, 92, 180, 0.75)'
                                }
                            }
                        },
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(45, 92, 180, 0.75)'
                            }, {
                                offset: 1,
                                color: 'rgba(45, 92, 180, 0)'
                            }])
                        },
                        data: b
                    },
                    {
                        name: '平行于y轴的趋势线',
                        type: 'line',
                        markLine: {
                            lineStyle: {
                                width: 1,
                                color: 'gray',
                            },
                            name: 'aa',
                            symbol: 'none',
                            data: [[
                                { coord: [b[0], 0] },
                                { coord: [b[b.length-1], 25] }//如何获取grid上侧最大值，目前是写死的
                            ], [
                                { coord: [a[a.length - 1], 0] },
                                { coord: [a[a.length - 1], 25] }
                            ],
                         [
                                { coord: [this.mob_total_timeflag2, 0] ,name:this.mob_total_timeflag2},
                                { coord: [this.mob_total_timeflag2, 25],name:this.mob_total_timeflag2 }
                            ],
                            [
                                { coord: [this.commonChartsWakeTime, 0], name: awakeStr+ '\n' + this.commonChartsWakeTime },
                                { coord: [this.commonChartsWakeTime, 25] }
                            ],
                            [
                                { coord: [this.commonChartsSleepTime, 0], name:sleepStr2  + '\n' + this.commonChartsSleepTime },
                                { coord: [this.commonChartsSleepTime, 25] }
                            ],
                            // [
                            //     { coord: [this.commonChartsTomorrowSleepTime, 0], name:sleepStr1  + '\n' + this.commonChartsTomorrowSleepTime },
                            //     { coord: [this.commonChartsTomorrowSleepTime, 25] }
                            // ],
                        ]
                        }
                    }
                ]
                });
            },

            drawMovement(a, b, c) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('day4'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        show: c,
                        text: 'No Data',
                        left: 'center',
                        top: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                            fontWeight: 400
                        }
                    },
                    grid: {
                        top: '15%',
                        left: '6%',
                        right: '1%',
                        bottom: '1%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'dotted'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#D8D8DB"
                            }
                        },
                        axisLine: {
                            show: false,
                            axisTick: {
                                show: false
                            },

                            lineStyle: {
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                        data: a

                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                       min:0,
                       max:25,
                       show:!c,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#AFB3C0"
                            }
                        },
                        axisLine: {
                            show: false,
                            axisTick: {
                                show: false
                            },
                            lineStyle: {
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                    },
                    tooltip: {
                        // 触发器
                        trigger: "axis",
                        axisPointer: {
                            type: 'line',
                        },
                        // formatter:'{c}%'
                        formatter(params) {
                            var a = '<div><p>' + params[0].name + '</p></div>'
                            for (var i = 0; i < params.length; i++) {
                                a += '<p>' + params[i].marker + params[i].value + '</p>';
                            }
                            return a;
                        }
                    },
                    series: [{
                        name: '销量',
                        type: 'line',
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                color: '#fff',
                                lineStyle: {
                                    color: 'rgba(245, 175, 0, 0.75)'
                                }
                            }
                        },
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(245, 175, 0, 0.75)'
                            }, {
                                offset: 1,
                                color: 'rgba(245, 175, 0, 0)'
                            }])
                        },
                        data: b
                    },
                    {
                        name: '平行于y轴的趋势线',
                        type: 'line',
                        markLine: {
                            lineStyle: {
                                width: 1,
                                color: '#6D7188',
                            },
                            name: 'aa',
                            symbol: 'none',
                            data: [[
                                { coord: [b[0], 0] },
                                { coord: [b[b.length-1], 25] }//如何获取grid上侧最大值，目前是写死的
                            ], [
                                { coord: [a[a.length - 1], 0] },
                                { coord: [a[a.length - 1], 25] }
                            ]]
                        }
                    }
                ]
                });
            },
            // 日报 打鼾干预
            drawAntiSnore(a, b, c) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('day5'))

                // 绘制图表
                myChart.setOption({
                    title: {
                        show: c,
                        text: 'No Data',
                        left: 'center',
                        top: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                            fontWeight: 400
                        }
                    },
                    grid: {
                        height:'80%',
                        top:'5%',
                        left: '5%',
                        right: '5%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: a,
                        axisLabel: {
                            // formatter: function shijiantime(times) {
                            //     var timearr = times.replace(" ", ":").replace(/\:/g, "-").split("-");
                            //     var timestr = timearr[3] + ":" + timearr[4] + ""
                            //     return timestr
                            // },
                            textStyle: {
                                color: "#D8D8DB"
                            }
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'solid'
                            }
                        },

                        axisLine: {
                            show: false,
                            axisTick: {
                                show: false
                            },

                            lineStyle: {
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max:5,
                        show:!c,
                        interval: 1,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            show: false,
                            textStyle: {
                                color: "#D8D8DB"
                            }
                        },
                        axisLine: {
                            show: false,
                            axisTick: {
                                show: false
                            },

                            lineStyle: {
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                    },
                    series: [{
                        type: "k",
                        barMaxWidth: 5,
                        itemStyle: {
                            normal: {
                                color: '#4197B5',
                                barBorderRadius: [40, 10, 10, 10],
                                borderColor: "none"
                            }
                        },
                        data: b,
                        showBackground: true,

                    },
                    // {
                    //     name: '平行于y轴的趋势线',
                    //     type: 'line',
                    //     markLine: {
                    //         lineStyle: {
                    //             width: 1,
                    //             color: '#6D7188',
                    //         },
                    //         name: 'aa',
                    //         symbol: 'none',
                    //         data: [[
                    //             { coord: [a[0], 0] },
                    //             { coord: [a[0], 5] }//如何获取grid上侧最大值，目前是写死的
                    //         ], [
                    //             { coord: [a[a.length - 1], 0] },
                    //             { coord: [a[a.length - 1], 5] }
                    //         ]]
                    //     }
                    // }
                ]
                });
            },
            //  饼图        
            drawMonthlySleepQuality(a, b, c) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('month1'))
                // 绘制图表
                myChart.setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    grid: {
                        top: '1%',
                        left: '1%',
                        right: '1%',
                        bottom: '1%',
                        containLabel: true
                    },
                    series: [
                        {
                            // name: '访问来源',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            radius: ["45%", "60%"],
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: a, name: 'Deep', itemStyle: { color: '#6B5CAD' } },
                                { value: b, name: 'Light', itemStyle: { color: '#4197B5' } },
                                { value: c, name: 'Awale', itemStyle: { color: '#AFB3C0' } },
                            ]
                        }
                    ]
                });
            },
            // 月报 起来和入睡时间
            drawWakeAndFallTime(a, b, c) {
                let myChart = echarts.init(document.getElementById('month2'))
                var cc = this.fall_clone
                var dd = this.wake_clone
                function ChangeHourMinutestr(str) {

                    if (str > 1440 && str != 0) {
                        str = str - 1440

                        if (str !== "0" && str !== "" && str !== null) {
                            return ((Math.floor(str / 60)).toString().length < 2 ? "0" + (Math.floor(str / 60)).toString() :
                                (Math.floor(str / 60)).toString()) + ":" + ((str % 60).toString().length < 2 ? "0" + (str % 60).toString() : (str % 60).toString());

                        } else {
                            return "";
                        }
                    } else {
                        if (str !== "0" && str !== "" && str !== null) {
                            return ((Math.floor(str / 60)).toString().length < 2 ? "0" + (Math.floor(str / 60)).toString() :
                                (Math.floor(str / 60)).toString()) + ":" + ((str % 60).toString().length < 2 ? "0" + (str % 60).toString() : (str % 60).toString());

                        } else {
                            return "";
                        }
                    }

                }
                function ChangeStrToMinutes(str) {
                    console.log(str)
                    var arrminutes = str.split(":");
                    if (arrminutes.length == 2) {
                        var minutes = parseInt(arrminutes[0]) * 60 + parseInt(arrminutes[1]);
                        return minutes;
                    } else {
                        return 0;
                    }
                }
                var aa = this.avgSleepTime
                var bb = this.avgWakeTime

                var ech_avg_sleep_time;
                var ech_avg_wake_time = ChangeStrToMinutes(this.avgWakeTime)
                if (ChangeStrToMinutes(this.avgSleepTime) < 720) {
                    ech_avg_sleep_time = ChangeStrToMinutes(this.avgSleepTime) + 1440
                    console.log('1')
                } else {
                    ech_avg_sleep_time = ChangeStrToMinutes(this.avgSleepTime)
                    console.log('2')
                }
                // 绘制图表
                myChart.setOption({
                    title: {
                        show: c,
                        text: 'No Data',
                        left: 'center',
                        top: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                            fontWeight: 400
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '4%',
                        right: '15%',
                        bottom: '1%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        interval: 2,
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#D8D8DB"
                            }
                        },
                        axisLine: {
                            show: false,
                            // onZero: true,
                            axisTick: {
                                show: false
                            },

                            lineStyle: {
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                        data: a,
                    },

                    yAxis: {
                        type: 'value',
                        // inverse: true,
                        scale: false,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            formatter: function (value, index) {
                                // if (value > 1440) {
                                //     value = value - 1440

                                //     return ChangeHourMinutestr(value)
                                // }
                                return ChangeHourMinutestr(value)

                            },
                            textStyle: {
                                color: "#D8D8DB"
                            }
                        },
                        axisLine: {
                            show: false,
                            axisTick: {
                                show: false
                            },

                            lineStyle: {
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                    },
                    tooltip: {
                        // 触发器
                        trigger: "axis",
                        axisPointer: {
                            type: 'line',
                            crossStyle: {
                                color: '#B3BCE3'
                            }

                        },
                        formatter(params) {
                            var a = '<div><p>' + params[0].name + '</p></div>'
                            for (let i = 0; i < params.length; i++) {
                                // console.log(params[i])
                                if (!isNaN(params[i].value[2])) {
                                    a += '<p>' + params[i].marker + cc + " : " + ChangeHourMinutestr(params[i].value[2] + "") + '</p>' + '<p>' + params[i].marker + dd + " : " + ChangeHourMinutestr((params[i].value[1]) + "") + '</p>';
                                }
                            }
                            return a;
                        }
                    },
                    series: [{
                        type: 'k',
                        markLine: {
                            symbol: "none",
                            data: [{
                                silent: true, //鼠标悬停事件  true没有，false有
                                lineStyle: { //警戒线的样式  ，虚实  颜色
                                    type: "dashed",
                                    color: "#52EEFF",
                                },
                                label: {
                                    position: 'end',
                                    formatter: `${aa}`,
                                    color: "#D8D8DB",
                                    fontSize: '12'
                                },
                                yAxis: ech_avg_sleep_time

                            }, {

                                silent: true,
                                lineStyle: {
                                    type: "dashed",

                                    color: "#FFAD67",
                                },
                                label: {
                                    position: 'end',
                                    color: "#D8D8DB",
                                    formatter: `${bb}`,
                                    fontSize: '12'
                                },
                                yAxis: ech_avg_wake_time

                            }]
                        },
                        barMaxWidth: 3.5,
                        itemStyle: {
                            borderColor: "none",
                            color: '#8877D1',
                            emphasis: {
                            }
                        },
                        lineStyle: {
                            normal: {
                                opacity: 1,
                            }
                        },
                        data: b,
                    }]
                });
            },
            // 月报 心率
            drawMonthHeartRate(a, b, c) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('month3'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        show: c,
                        text: 'No Data',
                        left: 'center',
                        top: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                            fontWeight: 400
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '6%',
                        right: '7%',
                        bottom: '1%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'dotted'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#D8D8DB"
                            }
                        },
                        axisLine: {
                            show: false,
                            axisTick: {
                                show: false
                            },

                            lineStyle: {
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                        data: a

                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 20,
                        // boundaryGap : [ 0, 0.1 ],
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#666870',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#AFB3C0"
                            }
                        },
                        axisLine: {
                            show: false,
                            axisTick: {
                                show: false
                            },
                            lineStyle: {
                                color: '#666870 ',
                                width: 1, //这里是为了突出显示加上的  
                            }
                        },
                    },
                    tooltip: {
                        // 触发器
                        trigger: "axis",
                        axisPointer: {
                            type: 'line',
                        },
                        // formatter:'{c}%'
                        formatter(params) {
                            var a = '<div><p>' + params[0].name + '</p></div>'
                            for (var i = 0; i < params.length; i++) {
                                a += '<p>' + params[i].marker + params[i].value + '</p>';
                            }
                            return a;
                        }
                    },
                    series: [{
                        name: '销量',
                        type: 'line',
                        symbol: 'none',
                        itemStyle: {
                            normal: {
                                color: '#fff',
                                lineStyle: {
                                    color: 'rgba(208, 77, 77, 0.75)'
                                }
                            }
                        },
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(208, 77, 77, 0.75)'
                            }, {
                                offset: 1,
                                color: 'rgba(208, 77, 77, 0)'
                            }])
                        },
                        data: b
                    }]
                });
            },
Lddddddd.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
魔改echarts生成类环形散点图，附带随机数据的组装
Eiwen的博客
04-08 1806
我们先看效果图，如下图所示：接下来是代码部分，首先准备一个容器： &amp;lt;div class=&quot;col-sm-12 chart&quot; id=&quot;backImage&quot;&amp;gt; &amp;lt;div id=&quot;monitor-rada&quot; class=&quot;rada&quot;&amp;gt;&amp;lt;/div&
echarts~echarts-gl 配套版本文件
11-02
而 ECharts-GL 是 ECharts 的扩展版本，专门用于处理三维数据可视化和地理空间分析，它为 ECharts 添加了更多高级的三维图表和地图功能。 1. **ECharts 基础知识**： - **安装**：ECharts 可通过 npm 或者直接引入...
ECharts动态切换及自定义主题
2302_80385233的博客
04-15 550
【代码】ECharts动态切换及自定义主题。
Vue 炫酷 Echarts 图表
热门推荐
大家好，我是 ed.
11-11 1万+
Vue 炫酷 Echarts 图表 网址：https://www.makeapie.com/explore.html#sort=ranktimeframe=allauthor=all 这上边还是有很多设计炫酷的 echarts 图表的，可以做大屏的时候使用。简单的写几个案例，可以根据自己的需要选择使用。 水波球 首先使用这个水波球也有叫水纹球的，他需要安装一个插件 npm install echarts-liquidfill 然后就可以使用了。 效果 代码 <doc> https://w
如何修改Echarts的各个小部分
曾小超的博客
07-04 3115
1.修改X轴的相关信息 1.1. X轴 xAxis: {} 1.2. X轴的数据，data，Y轴也可以设置 xAxis: { data: [], } 1.3. X轴文字标签，Y轴也可以设置 xAxis: { axisLabel: { //X轴标签 interval: 0, //0,每列都显示,隔一列显示一个 rot
echarts 图表 pc && 移动端自适应方案
纯爱枫若情的博客
07-17 9051
因为公司主要做前端数据可视化项目的，因此有些项目需要有大屏展示的效果，所以一般公司的项目，设计那边给出的设计稿都是 1920*1080 的。 数据可视化，肯定是离不开数据图表的展示，所以有些图表，我们在技术选型上就用了开源的 echarts。 如果只是单纯的做固定尺寸的大屏页面的话，做起来肯定是很简单的，直接照着设计稿的尺寸无脑的还原就行了。 但是实际情况下，用户的需求是复杂多变的，比如最近做的这...
vue通过echarts实现炫酷图表功能
qq_44552416的博客
07-16 288
需求：Echarts图表在我们开发工作中比较常见的使用，有时候开发需求需要我们做一些比较炫酷自定义的功能图表，这个时候基本的官网。中是不满足我们使用的。这里我们推荐几款Echarts的社区网站，还有几个实例炫酷的图表就行演示使用。2-以下是具体的图表炫酷的案例分析如下。
echarts-5.4.3
03-02
通过对 `echarts-5.4.3` 压缩包的解压和研究，开发者可以深入了解其内部结构，学习如何配置选项、处理数据、创建动态图表，以及如何与其他前端框架（如 Vue、React、Angular）集成，从而提升项目的可视化水平。
echarts-gl.js和echarts-gl.main.js依赖包
11-17
ECharts-gl.js 和 echarts-gl.main.js 是 ECharts 的扩展包，专门为三维可视化设计，将 ECharts 的能力扩展到了三维空间。 在 ECharts 的基础上，echarts-gl.js 和 echarts-gl.main.js 添加了对三维可视化的支持，...
echarts-src-4.8.0 源码以及 echarts-doc-4.8文档二合一文档包，方便大家进行开发
01-25
这个压缩包"echarts-src-4.8.0 源码以及 echarts-doc-4.8 文档二合一文档包"提供了 ECharts 4.8.0 版本的完整源代码和详细文档，对于开发者来说是一份非常宝贵的资源。 首先，`echarts-src-4.8.0`包含了ECharts的源...
echarts-liquidfill水滴图插件包3.1.0版本
10-11
为echarts-liquidfill插件下载不成功者提供！ 1：将包拖入node-modules种解压 2：找到package-lock.json文件：加上以下代码： "echarts-liquidfill": { "version": "3.1.0", "resolved": ...
Echarts 版本的那些坑
Lik1024
05-05 3968
这里只是简单记录Echarts使用中遇到的一些差异问题，仅代表个人观点，如有雷同，不慎荣幸v3.* VS v4.*xAxis.axisLabel 中的边框设置series[i]-pie 中的hoverOffset未完待续。。。...
WEB渗透Web突破篇-SSRF
最新发布
qq_59468567的博客
08-03 444
转码服务 在线翻译 获取超链接的标题等内容进行显示 请求远程服务器资源的地方，图片加载与下载(通过URL地址加载或下载图片) 图片、文章收藏功能 对外发起网络请求的地方，网站采集、网页抓取的地方。 头像 (远程加载头像) 一切要你输入网址的地方和可以输入ip的地方。 数据库内置功能(mongodb的copyDatabase函数) 邮件系统 文件处理 在线处理工具 从URL关键字中寻找：share、wap、url、link、src、source、target、u、3g、display、sourceURl、im
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1442
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
weixin_67239318的博客
08-03 156
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 363
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 909
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 400
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
echarts-gl.min.j echarts-gl.js echarts
06-19
然而，`echarts-gl.min.js`和`echarts-gl.js`是ECharts的一个扩展模块，专为3D图形和地理空间数据（如地球、地图）提供支持。它利用WebGL技术，使得ECharts能够绘制复杂的3D立体图，如地球上的3D地图、柱状图的3D...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值