board-yp/js/water.js

// 柱状图1模块
(function() {
    // 实例化对象
    var myChart = echarts.init(document.querySelector(".bar-3d .chart"));

    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {

        // 计算
        let midRatio = (startRatio + endRatio) / 2;

        let startRadian = startRatio * Math.PI * 2;
        let endRadian = endRatio * Math.PI * 2;
        let midRadian = midRatio * Math.PI * 2;

        // 如果只有一个扇形，则不实现选中效果。
        if (startRatio === 0 && endRatio === 1) {
            isSelected = false;
        }

        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
        k = typeof k !== 'undefined' ? k : 1 / 3;

        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

        // 计算高亮效果的放大比例（未高亮，则比例为 1）
        let hoverRate = isHovered ? 1.05 : 1;

        // 返回曲面参数方程
        return {

            u: {
                min: -Math.PI,
                max: Math.PI * 3,
                step: Math.PI / 32
            },

            v: {
                min: 0,
                max: Math.PI * 2,
                step: Math.PI / 20
            },

            x: function(u, v) {
                if (u < startRadian) {
                    return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
                }
                if (u > endRadian) {
                    return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
                }
                return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
            },

            y: function(u, v) {
                if (u < startRadian) {
                    return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
                }
                if (u > endRadian) {
                    return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
                }
                return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
            },

            z: function(u, v) {
                if (u < -Math.PI * 0.5) {
                    return Math.sin(u);
                }
                if (u > Math.PI * 2.5) {
                    return Math.sin(u);
                }
                return Math.sin(v) > 0 ? 1 : -1;
            }
        };
    }

    // 生成模拟 3D 饼图的配置项
    function getPie3D(pieData, internalDiameterRatio) {

        let series = [];
        let sumValue = 0;
        let startValue = 0;
        let endValue = 0;
        let legendData = [];
        let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;

        // 为每一个饼图数据，生成一个 series-surface 配置
        for (let i = 0; i < pieData.length; i++) {

            sumValue += pieData[i].value;

            let seriesItem = {
                name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
                type: 'surface',
                parametric: true,
                wireframe: {
                    show: false
                },
                pieData: pieData[i],
                pieStatus: {
                    selected: false,
                    hovered: false,
                    k: k
                }
            };

            if (typeof pieData[i].itemStyle != 'undefined') {

                let itemStyle = {};

                typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
                typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;

                seriesItem.itemStyle = itemStyle;
            }
            series.push(seriesItem);
        }

        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
        for (let i = 0; i < series.length; i++) {
            endValue = startValue + series[i].pieData.value;
            console.log(series[i]);
            series[i].pieData.startRatio = startValue / sumValue;
            series[i].pieData.endRatio = endValue / sumValue;
            series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);

            startValue = endValue;

            legendData.push(series[i].name);
        }



        // 准备待返回的配置项，把准备好的 legendData、series 传入。
        let option = {

            // globe:{
            //     baseTexture: "../img/world.jpg",
            //     heightTexture: "../img/world.jpg",
            //      displacementScale: 0.04,
            //     environment: "../img/starfield.jpg",
            //     shading:"realistic",
            //     realisticMaterial: {
            //            roughness: 0.9
            //        },
            //     postEffect: {
            //            enable: true
            //        },
            //        light: {
            //            main: {
            //                intensity: 5,
            //                shadow: true
            //            },
            //            ambientCubemap: {
            //                texture: "../img/pisa.hdr",
            //                diffuseIntensity: 0.2
            //            }
            //        }
            //   },




            tooltip: {
                formatter: params => {
                    if (params.seriesName !== 'mouseoutSeries') {
                        return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}%`;
                    }
                }
            },
            // legend: {
            //     data: legendData,
            //     textStyle: {
            //         color: '#fff',
            //         fontSize: 14
            //     }
            // },
            xAxis3D: {
                min: -1,
                max: 1
            },
            yAxis3D: {
                min: -1,
                max: 1
            },
            zAxis3D: {
                min: -1,
                max: 1
            },
            grid3D: {


                show: false,
                boxHeight: 40,
                top: '-10%',
                // bottom: '80%',
                // environment: '../images/3d-bg.png', //aa背景色

                viewControl: {
                    distance: 170, //aa距离
                    alpha: 21, //aa角度
                    beta: 10, //aa角度
                    zoomSensitivity: false //是否开启缩放和平移
                },
            },
            series: series
        };
        return option;
    }


    // 传入数据生成 option
    var option = getPie3D([{
            name: '已处理率',
            value: 80,
            itemStyle: {
                opacity: 0.5,
                color: 'rgba(0,127,244,.8)',
            }
        }, {
            name: '未处理率',
            value: 20,
            itemStyle: {
                opacity: 0.5,
                color: 'rgba(209,126,23,.8)',
            }
        }

    ], 2);

    // 把配置给实例对象
    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });

})();


// 折线图定制 (数据离散率挖掘)
(function() {

    var sortData = [{
        data: [
            [30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 200, 180, 79, 82, 64, 43, 60, 19, 82, 64, 43, 60, 19, 34],
            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
            [400, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
        ]
    }];

    var xData = function() {
        var data = [];
        for (var i = 1; i < 31; i++) {
            data.push(i);
        }
        return data;
    }();

    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".divergence .chart"));
    // 2.指定配置
    var option = {

        color: [{

                colorStops: [{
                    offset: 0,
                    color: '#F9860C' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                }],

            },

            {

                colorStops: [{
                    offset: 0,
                    color: '#07E1F1' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#0456CB' // 100% 处的颜色
                }],

            },

            {

                colorStops: [{
                    offset: 0,
                    color: '#11F90C' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#3FC713' // 100% 处的颜色
                }],

            }

        ],
        // color: ["#FF9C00", "#0096FF", "#11F90C"], // 通过这个color修改两条线的颜色
        tooltip: {
            trigger: "axis",
            // backgroundColor: '#12DFE0',
            textStyle: {
                align: 'left' //图例左对齐
            },

        },
        legend: {
            // 如果series 对象有name 值，则 legend可以不用写data
            itemGap: 20,
            itemHeight: 2,
            itemWidth: 15,
            icon: 'rect',
            textStyle: {
                color: "#fff"
            },
            top: "bottom",
        },
        grid: {
            top: "0%",
            left: "1%",
            right: "1%",
            bottom: "10%",
            show: true, // 显示边框
            borderWidth: '0', //去除边框
            containLabel: true // 包含刻度文字在内
        },

        xAxis: {
            type: "category",
            boundaryGap: false,
            data: xData,
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: "#AADDFF" // 文本颜色
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.3)'
                }
            },
            splitNumber: 8,
            splitLine: {
                show: false
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
                }
            }
        },

        yAxis: {
            type: "value",
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                show: false // 去除文本
            },
            axisLine: {
                show: false // 去除轴线
            },
            splitLine: {
                lineStyle: {
                    color: "#012f4a" // 分割线颜色
                }
            }
        },
        series: [{
                symbol: "none",
                name: "方差",
                type: "line",
                data: sortData[0].data[0]
            },
            {
                symbol: "none",
                name: "标准差",
                type: "line",



                data: sortData[0].data[1]
            }, {
                symbol: "none",
                name: "平均值",
                type: "line",



                data: sortData[0].data[2]
            }
        ]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });
})();

// 渗漏隐藏排查
(function() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".bar.hiddenCheck .chart"));
    var xData = ['三到四层', '四到五层', '七到八层', '八到九层', '九到十层', '三到四层', '四到五层', '七到八层', '八到九层', '九到十层', '三到四层', '四到五层', '七到八层', '八到九层'];

    var option = {
        backgroundColor: 'transparent',
        color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
        tooltip: {
            //提示框组件
            trigger: 'axis',
            formatter: function(params) {
                var relVal = params[0].name;
                for (var i = 0, l = params.length; i < l; i++) {
                    relVal += '<br/>';
                    relVal += '<span style="display:inline-block;margin-right:5px;border-radius:2px;width:9px;height:9px;background-color:' + params[i].color + '"></span>';
                    relVal += params[i].seriesName + ' : ' + params[i].value;
                }
                return relVal;
            },
            axisPointer: {
                type: 'shadow',
            },
            textStyle: {

                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
            },
        },
        grid: {
            left: '0',
            right: '0',
            bottom: '40',
            top: '0',
            containLabel: true,
        },
        legend: {
            // 如果series 对象有name 值，则 legend可以不用写data
            itemGap: 20,
            itemHeight: 2,
            itemWidth: 15,
            icon: 'rect',
            textStyle: {
                color: "#fff"
            },
            top: "bottom",
        },


        //添加横线滚动条
        dataZoom: {
            start: 0, //默认为0
            end: 100 - 1500 / 18, //默认为100
            type: 'slider',
            show: xData.length > 4 ? true : false,
            xAxisIndex: [0],
            handleSize: 0, //滑动条的 左右2个滑动条的大小
            height: 4, //组件高度
            left: 20, //左边的距离
            right: 20, //右边的距离
            bottom: 30, //右边的距离
            handleColor: '#CBBCDB', //h滑动图标的颜色
            handleStyle: {
                borderColor: "#CBBCDB",
                borderWidth: "1",
                shadowBlur: 2,
                background: "#CBBCDB",
                shadowColor: "#CBBCDB",
            },
            textStyle: {
                color: "#fff"
            },

            backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色
            showDataShadow: false, //是否显示数据阴影 默认auto
            // showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
            filterMode: 'filter',
        },


        xAxis: [{
            type: 'category',
            //	boundaryGap: true,//坐标轴两边留白
            data: xData,
            axisLabel: {
                interval: 0,
                // rotate: 340,
                // formatter: function(val) {
                //     return val.split("").join("\n");
                // }, //横轴信息文字竖直显示
                textStyle: {
                    color: '#AADDFF',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                },
            },

            axisTick: {
                //坐标轴刻度相关设置。
                show: false,
            },
            axisLine: {
                //坐标轴轴线相关设置

            },
            splitLine: {
                //坐标轴在 grid 区域中的分隔线。
                show: false,
            },
        }, ],
        yAxis: [{
            type: 'value',

            axisLabel: false,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#204C6F'],
                    opacity: 0.3,
                },
            },
            boundaryGap: ['0', '10%'],
        }],
        series: [{
                name: '正常',
                type: 'bar',
                data: [400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31],
                barMaxWidth: '11',
                itemStyle: {
                    borderColor: "#0096FF",
                },
                barGap: '50%',
            },
            {
                name: '实际',
                type: 'bar',
                data: [500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36],
                barMaxWidth: '11',
                itemStyle: {
                    borderColor: "#FF9C00",
                },

            },

        ],
    };




    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });
})();

// 折线图定制 (跨设备数据关联)
(function() {

    var sortData = [{
            sortName: "喷淋末端与水泵启停关联",
            data: [
                // 两个数组是因为有两条线
                [24, 52, 60, 70, 80, 30, 95, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
                [40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 85, 80, 75, 70, 65, 60, 55, 50, 45, 40, 70, 80, 75, 70, 65, 60, 55, 50, 45, 40, ]
            ]
        },
        {
            sortName: "试验消火栓与屋顶水箱液位关联",
            data: [
                // 两个数组是因为有两条线
                [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
                [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ]
            ]
        }
    ];

    var xData = function() {
        var data = [];
        for (var i = 1; i < 31; i++) {
            data.push(i);
        }
        return data;
    }();

    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".oldAnalysis .chart"));
    // 2.指定配置
    var option = {

        color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
        tooltip: {
            trigger: "axis",
            textStyle: {
                align: 'left' //图例左对齐
            },
        },
        legend: {
            // 如果series 对象有name 值，则 legend可以不用写data
            itemGap: 20,
            itemHeight: 2,
            itemWidth: 15,
            icon: 'rect',
            textStyle: {
                color: "#fff"
            },
            top: "bottom",
        },
        grid: {
            top: "0%",
            left: "1%",
            right: "1%",
            bottom: "15%",
            show: true, // 显示边框
            borderWidth: '0', //去除边框
            containLabel: true // 包含刻度文字在内
        },

        xAxis: {
            type: "category",
            boundaryGap: false,
            data: xData,
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: "#AADDFF" // 文本颜色
            },
            axisLine: {
                show: false // 去除轴线
            }
        },

        yAxis: {
            type: "value",
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                show: false // 去除文本
            },
            axisLine: {
                show: false // 去除轴线
            },
            splitLine: {
                lineStyle: {
                    color: "#012f4a" // 分割线颜色
                }
            }
        },
        series: [{
                symbol: "none",
                name: "水泵启动",
                type: "line",
                smooth: true, // true 可以让我们的折线显示带有弧度
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1, [{
                                    offset: 0,
                                    color: "rgba(255,156,0, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(255,156,0, 0.3)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },


                data: sortData[0].data[0]
            },
            {
                symbol: "none",
                name: "水泵停止",
                type: "line",
                smooth: true,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1, [{
                                    offset: 0,
                                    color: "rgba(0,150,255,0.5)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(0,150,255, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },

                data: sortData[0].data[1]
            }
        ]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });

    // 点击切换效果
    $(".oldAnalysis .tab-line").on("click", "a", function() {
        $(this).addClass('active').siblings().removeClass('active')
        var obj = sortData[$(this).index()];
        option.series[0].data = obj.data[0];
        option.series[1].data = obj.data[1];

        // 重新渲染
        myChart.setOption(option);

    });
})();


// 折线图定制 (数据波动关联)
(function() {

    var sortData = [{
        data: [
            [30, 70, 100, 120, 130, 190, 200, 230, 120, 100, 90, 80, 59, 30],
        ]
    }];

    var xData = ['一到二层', '二到三层', '三到四层', '四到五层', '五到六层', '六到七层', '七到八层', '八到九层', '九到十层', '十到十一层', '十一到十二层', '十二到十三层']
        // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".hotAnalysis .chart"));
    // 2.指定配置
    var option = {

        color: ["#FE92B3"], // 通过这个color修改三条线的颜色
        tooltip: {
            trigger: "axis",
            textStyle: {
                align: 'left' //图例左对齐
            },
            // backgroundColor: '#12DFE0',
            // formatter: '{a0}: {c0}<br />{b}'

        },
        legend: false
            // {
            //     // 如果series 对象有name 值，则 legend可以不用写data
            //     itemGap: 20,
            //     itemHeight: 2,
            //     itemWidth: 15,
            //     icon: 'rect',
            //     textStyle: {
            //         color: "#fff"
            //     },
            //     top: "bottom",
            // }
            ,
        grid: {
            top: "0%",
            left: "1%",
            right: "1%",
            bottom: "15%",
            show: true, // 显示边框
            borderWidth: '0', //去除边框
            containLabel: false, // 不包含刻度文字在内


        },

        xAxis: {
            type: "category",
            boundaryGap: false,
            data: xData,
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: "#AADDFF" // 文本颜色
            },
            axisLine: {
                show: false // 去除轴线
            }
        },

        yAxis: {
            type: "value",
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                show: false // 去除文本
            },
            axisLine: {
                show: false // 去除轴线
            },
            splitLine: {
                lineStyle: {
                    color: "#012f4a" // 分割线颜色
                }
            }
        },
        series: [{
            symbol: "none",
            name: "异常水压值",
            type: "line",
            smooth: true,
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1, [{
                                offset: 0,
                                color: "rgba(255,147,180,.6)"
                            },
                            {
                                offset: 0.8,
                                color: "rgba(255,147,180, 0.4)"
                            }
                        ],
                        false
                    ),
                }
            },

            data: sortData[0].data[0]
        }]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });


})();








// 饼形图定制
// 折线图定制
// (function() {
//     // 基于准备好的dom，初始化echarts实例
//     var myChart = echarts.init(document.querySelector(".pie .chart"));

//     option = {
//         tooltip: {
//             trigger: "item",
//             formatter: "{a} <br/>{b}: {c} ({d}%)",
//             position: function(p) {
//                 //其中p为当前鼠标的位置
//                 return [p[0] + 10, p[1] - 10];
//             }
//         },
//         legend: {
//             top: "90%",
//             itemWidth: 10,
//             itemHeight: 10,
//             data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
//             textStyle: {
//                 color: "rgba(255,255,255,.5)",
//                 fontSize: "12"
//             }
//         },
//         series: [{
//             name: "年龄分布",
//             type: "pie",
//             center: ["50%", "42%"],
//             radius: ["40%", "60%"],
//             color: [
//                 "#065aab",
//                 "#066eab",
//                 "#0682ab",
//                 "#0696ab",
//                 "#06a0ab",
//                 "#06b4ab",
//                 "#06c8ab",
//                 "#06dcab",
//                 "#06f0ab"
//             ],
//             label: { show: false },
//             labelLine: { show: false },
//             data: [
//                 { value: 1, name: "0岁以下" },
//                 { value: 4, name: "20-29岁" },
//                 { value: 2, name: "30-39岁" },
//                 { value: 2, name: "40-49岁" },
//                 { value: 1, name: "50岁以上" }
//             ]
//         }]
//     };

//     // 使用刚指定的配置项和数据显示图表。
//     myChart.setOption(option);
//     window.addEventListener("resize", function() {
//         myChart.resize();
//     });

//     // 点击切换显示数据
//     $(".line h2").on("click", "a", function() {
//         // 点击a之后，根据当前的a的索引号，找到对应的yearData的数据
//         var obj = yearData[$(this).index()];
//         option.series[0].data = obj.data[0];
//         option.series[1].data = obj.data[1];
//         // 重新渲染数据
//         myChart.setOption(option);
//     });
// })();



// 折线图 优秀作品
// (function() {
//     // 基于准备好的dom，初始化echarts实例
//     var myChart = echarts.init(document.querySelector(".line1 .chart"));

//     option = {
//         tooltip: {
//             trigger: "axis",
//             axisPointer: {
//                 lineStyle: {
//                     color: "#dddc6b"
//                 }
//             }
//         },
//         legend: {
//             top: "0%",
//             textStyle: {
//                 color: "rgba(255,255,255,.5)",
//                 fontSize: "12"
//             }
//         },
//         grid: {
//             left: "10",
//             top: "30",
//             right: "10",
//             bottom: "10",
//             containLabel: true
//         },

//         xAxis: [{
//                 type: "category",
//                 boundaryGap: false,
//                 axisLabel: {
//                     textStyle: {
//                         color: "rgba(255,255,255,.6)",
//                         fontSize: 12
//                     }
//                 },
//                 axisLine: {
//                     lineStyle: {
//                         color: "rgba(255,255,255,.2)"
//                     }
//                 },

//                 data: [
//                     "01",
//                     "02",
//                     "03",
//                     "04",
//                     "05",
//                     "06",
//                     "07",
//                     "08",
//                     "09",
//                     "11",
//                     "12",
//                     "13",
//                     "14",
//                     "15",
//                     "16",
//                     "17",
//                     "18",
//                     "19",
//                     "20",
//                     "21",
//                     "22",
//                     "23",
//                     "24",
//                     "25",
//                     "26",
//                     "27",
//                     "28",
//                     "29",
//                     "30"
//                 ]
//             },
//             {
//                 axisPointer: { show: false },
//                 axisLine: { show: false },
//                 position: "bottom",
//                 offset: 20
//             }
//         ],

//         yAxis: [{
//             type: "value",
//             axisTick: { show: false },
//             axisLine: {
//                 lineStyle: {
//                     color: "rgba(255,255,255,.1)"
//                 }
//             },
//             axisLabel: {
//                 textStyle: {
//                     color: "rgba(255,255,255,.6)",
//                     fontSize: 12
//                 }
//             },

//             splitLine: {
//                 lineStyle: {
//                     color: "rgba(255,255,255,.1)"
//                 }
//             }
//         }],
//         series: [{
//                 name: "播放量",
//                 type: "line",
//                 smooth: true,
//                 symbol: "circle",
//                 symbolSize: 5,
//                 showSymbol: false,
//                 lineStyle: {
//                     normal: {
//                         color: "#0184d5",
//                         width: 2
//                     }
//                 },
//                 areaStyle: {
//                     normal: {
//                         color: new echarts.graphic.LinearGradient(
//                             0,
//                             0,
//                             0,
//                             1, [{
//                                     offset: 0,
//                                     color: "rgba(1, 132, 213, 0.4)"
//                                 },
//                                 {
//                                     offset: 0.8,
//                                     color: "rgba(1, 132, 213, 0.1)"
//                                 }
//                             ],
//                             false
//                         ),
//                         shadowColor: "rgba(0, 0, 0, 0.1)"
//                     }
//                 },
//                 itemStyle: {
//                     normal: {
//                         color: "#0184d5",
//                         borderColor: "rgba(221, 220, 107, .1)",
//                         borderWidth: 12
//                     }
//                 },
//                 data: [
//                     30,
//                     40,
//                     30,
//                     40,
//                     30,
//                     40,
//                     30,
//                     60,
//                     20,
//                     40,
//                     20,
//                     40,
//                     30,
//                     40,
//                     30,
//                     40,
//                     30,
//                     40,
//                     30,
//                     60,
//                     20,
//                     40,
//                     20,
//                     40,
//                     30,
//                     60,
//                     20,
//                     40,
//                     20,
//                     40
//                 ]
//             },
//             {
//                 name: "转发量",
//                 type: "line",
//                 smooth: true,
//                 symbol: "circle",
//                 symbolSize: 5,
//                 showSymbol: false,
//                 lineStyle: {
//                     normal: {
//                         color: "#00d887",
//                         width: 2
//                     }
//                 },
//                 areaStyle: {
//                     normal: {
//                         color: new echarts.graphic.LinearGradient(
//                             0,
//                             0,
//                             0,
//                             1, [{
//                                     offset: 0,
//                                     color: "rgba(0, 216, 135, 0.4)"
//                                 },
//                                 {
//                                     offset: 0.8,
//                                     color: "rgba(0, 216, 135, 0.1)"
//                                 }
//                             ],
//                             false
//                         ),
//                         shadowColor: "rgba(0, 0, 0, 0.1)"
//                     }
//                 },
//                 itemStyle: {
//                     normal: {
//                         color: "#00d887",
//                         borderColor: "rgba(221, 220, 107, .1)",
//                         borderWidth: 12
//                     }
//                 },
//                 data: [
//                     50,
//                     30,
//                     50,
//                     60,
//                     10,
//                     50,
//                     30,
//                     50,
//                     60,
//                     40,
//                     60,
//                     40,
//                     80,
//                     30,
//                     50,
//                     60,
//                     10,
//                     50,
//                     30,
//                     70,
//                     20,
//                     50,
//                     10,
//                     40,
//                     50,
//                     30,
//                     70,
//                     20,
//                     50,
//                     10,
//                     40
//                 ]
//             }
//         ]
//     };

//     // 使用刚指定的配置项和数据显示图表。
//     myChart.setOption(option);
//     window.addEventListener("resize", function() {
//         myChart.resize();
//     });
// })();

// 点位分布统计模块
// (function() {
//     // 1. 实例化对象
//     var myChart = echarts.init(document.querySelector(".pie1  .chart"));
//     // 2. 指定配置项和数据
//     var option = {
//         legend: {
//             top: "90%",
//             itemWidth: 10,
//             itemHeight: 10,
//             textStyle: {
//                 color: "rgba(255,255,255,.5)",
//                 fontSize: "12"
//             }
//         },
//         tooltip: {
//             trigger: "item",
//             formatter: "{a} <br/>{b} : {c} ({d}%)"
//         },
//         // 注意颜色写的位置
//         color: [
//             "#006cff",
//             "#60cda0",
//             "#ed8884",
//             "#ff9f7f",
//             "#0096ff",
//             "#9fe6b8",
//             "#32c5e9",
//             "#1d9dff"
//         ],
//         series: [{
//             name: "点位统计",
//             type: "pie",
//             // 如果radius是百分比则必须加引号
//             radius: ["10%", "70%"],
//             center: ["50%", "42%"],
//             roseType: "radius",
//             data: [
//                 { value: 20, name: "云南" },
//                 { value: 26, name: "北京" },
//                 { value: 24, name: "山东" },
//                 { value: 25, name: "河北" },
//                 { value: 20, name: "江苏" },
//                 { value: 25, name: "浙江" },
//                 { value: 30, name: "深圳" },
//                 { value: 42, name: "广东" }
//             ],
//             // 修饰饼形图文字相关的样式 label对象
//             label: {
//                 fontSize: 10
//             },
//             // 修饰引导线样式
//             labelLine: {
//                 // 连接到图形的线长度
//                 length: 10,
//                 // 连接到文字的线长度
//                 length2: 10
//             }
//         }]
//     };

//     // 3. 配置项和数据给我们的实例化对象
//     myChart.setOption(option);
//     // 4. 当我们浏览器缩放的时候，图表也等比例缩放
//     window.addEventListener("resize", function() {
//         // 让我们的图表调用 resize这个方法
//         myChart.resize();
//     });
// })();