关于ECharts接口解析（持续更新）

1.官网：https://echarts.apache.org/zh/index.html

2.代码（基于vue开发，以下代码不能直接放入使用，需要搭好环境，然后根据解释书写规则和效果）：

            // 基于准备好的dom，初始化echarts实例

           var that = this
            let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF'];//声明颜色
            let myChart2 = that.$echarts.init(document.getElementById('chart-time-summary'))//获取显示的div的id
            myChart2.setOption(

                title: {
                    text: '标题'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                color: color,//引用颜色
                legend: {//显示数据有哪些（数据标题）
                    left: 'center',
                    icon: "circle", // 这个字段控制形状 类型包括 circle，rect
                    // ，roundRect，triangle，diamond，pin，arrow，none
                    data: ['警报消息', '体温异常', '体温打卡', '设备异常']
                },
                 toolbox: {//工具接口（点击下载图片等工具类）
                     feature: {
                        saveAsImage: {}
                    }
                 },
                grid: {//偏移
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    axisLine: { //坐标轴轴线相关设置。数学上的x轴
                        show: false,
                        lineStyle: {
                            color: '#cecece'
                        },
                    },

                    type: 'category',
                    axisTick: {
                        show: false
                        // 删除超出正坐标线段
                    },
                    boundaryGap: false,
                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18',
                        '19',
                        '20', '21', '22', '23', '0',
                    ]
                }],
                yAxis: [{
                    axisLine: { //坐标轴轴线相关设置。数学上的x轴
                        show: false,
                        lineStyle: {
                            color: '#cecece'
                        },
                    },
                    
                    type: 'value',
                    axisTick: {
                        show: false
                        // 删除超出正坐标线段
                    },
                    splitLine: { // 坐标轴以外的横线颜色
                    show:false,
                        lineStyle: {
                            type: 'dashed', // 虚线
                            color: 'black'
                        }
                    }
                }],
                // var endPercent = (7 / time.length) * 100;
                dataZoom: [ //给x轴设置滚动条  
                    {
                        start: 0, //默认为0  
                        end: 100, // 这两个用来调整显示多少数据
                        type: 'slider',
                        show: false,
                        xAxisIndex: [0],
                        handleSize: 0, //滑动条的 左右2个滑动条的大小  
                        height: 8, //组件高度  
                        left: '21%',
                        right: '3%',
                        top: '25',
                        handleColor: '#FAFAFA', //h滑动图标的颜色  
                        handleStyle: {
                            borderColor: "#FAFAFA",
                            borderWidth: "1",
                            shadowBlur: 2,
                            background: "#FAFAFA",
                            shadowColor: "#FAFAFA",
                        },
                        fillerColor: new that.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变  
                            //给第一个设置0，第四个设置1，就是垂直渐变  
                            offset: 0,
                            color: '#58FAF4'
                        }, {
                            offset: 1,
                            color: '#EFFBFB'
                        }]),
                        backgroundColor: '#FAFAFA', //两边未选中的滑动条区域的颜色  
                        showDataShadow: false, //是否显示数据阴影 默认auto  
                        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true  
                        handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                        filterMode: 'filter'
                    },
                    //下面这个属性是里面拖到  
                    {
                        type: 'inside',
                        show: true,
                        xAxisIndex: [0],
                        start: 0, //默认为1  
                        end: 50
                    },
                ],
                series: [{
                        name: '警报消息',
                        type: 'line',
                        smooth: true,

                        // lineStyle: {//阴影
                        //             normal: {
                        //                 width: 3,
                        //                 shadowColor: 'rgba(0,0,0,0.4)',
                        //                 shadowBlur: 5,
                        //                 shadowOffsetX: 4,
                        //                 shadowOffsetY: 5
                        //             }
                        //         },

                        // lineStyle: {
                        //     normal: {
                        //         color: "#F78181" // 线条颜色
                        //     }
                        // },
                        areaStyle: {
                            normal: {}
                        },             

                areaStyle: {//线条阴影
                            color: new that.$echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                        offset: 0,//线条到底的开始颜色
                                        color: '#F5BCA9'
                                    },
                                    {
                                        offset: 0.8,//浓度（暂时这样理解）
                                        color: 'rgba(255,153,154,0.01)'//线条到底的结束颜色
                                    }
                                ], false
                            ),
                            shadowColor: '#F5BCA9',//线的颜色
                            shadowBlur: 10

                        },

                        data: [0, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '体温异常',
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            normal: {}
                        }, //
                        data: [0, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '体温打卡',
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            normal: {}
                        }, 
                        data: [0, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '设备异常',
                        type: 'line',
                        areaStyle: {
                            normal: {}
                        }, //线条内是否填充颜色
                        smooth: true,
                        data: [0, 332, 301, 334, 390, 330, 320]
                    },

                ],

            });