board-yp/js/water.js

let loadingFunnel = () => {
    //title标示文字,标示线
    loadingFunnel.title = (text, top, left, color, fontStyle, fontFamily, fontSize) => {
        return {
            text: text,
            top: top,
            left: left,
            textStyle: {
                color: color,
                fontStyle: fontStyle,
                fontFamily: fontFamily,
                fontSize: fontSize,
            }
        }
    };
    loadingFunnel.arrData = [20, 40, 60, 80, 100];
    var myChart = echarts.init(document.querySelector(".bar .chart"));
    option = {
        title: [
            loadingFunnel.title('指标二', '25%', '21%', '#d1ecff', 'normal', 'sans-serif', '14'),
            loadingFunnel.title('40', '32%', '21%', '#EFC302', 'normal', 'Digital', '20'),
            loadingFunnel.title('指标一', '18%', '52%', '#d1ecff', 'normal', 'sans-serif', '14'),
            loadingFunnel.title('20', '24%', '55%', '#A5E104', 'normal', 'Digital', '20'),
            loadingFunnel.title('指标四', '43%', '16%', '#d1ecff', 'normal', 'sans-serif', '14'),
            loadingFunnel.title('80', '50%', '16%', '#0FE6BE', 'normal', 'Digital', '20'),
            loadingFunnel.title('指标三', '33%', '65%', '#d1ecff', 'normal', 'sans-serif', '14'),
            loadingFunnel.title('60', '39%', '68%', '#FF5A00', 'normal', 'Digital', '20'),
            loadingFunnel.title('指标五', '56%', '75%', '#d1ecff', 'normal', 'sans-serif', '14'),
            loadingFunnel.title('100', '62%', '78%', '#0078FF', 'normal', 'Digital', '20')
        ],
        color: ['#bb0004', '#FFD48A'],
        tooltip: {
            show: true,
            formatter: function(params, ticket, callback) {
                switch (params.name) {
                    case "指标一":
                        return "指标一 : " + loadingFunnel.arrData[0]
                        break;
                    case "指标二":
                        return "指标二 : " + loadingFunnel.arrData[1]
                        break;
                    case "指标三":
                        return "指标三 : " + loadingFunnel.arrData[2]
                        break;
                    case "指标四":
                        return "指标四 : " + loadingFunnel.arrData[3]
                        break;
                    default:
                        return "指标五 : " + loadingFunnel.arrData[4]
                }
            }
        },
        grid: {
            // containLabel: true,
            left: '10%',
            top: "19%",
            bottom: "15%",
        },
        xAxis: {
            show: false,
            data: [
                '一季度',
                '二季度',
                '三季度',
                '四季度'
            ],
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#5EA2ED',
                interval: 0
            },
            axisLine: {
                lineStyle: {
                    color: '#1B5BBA',
                }
            }
        },
        yAxis: {
            show: false,
            splitLine: { show: false },
            axisLine: {
                lineStyle: {
                    color: '#1B5BBA',
                }
            },
            axisLabel: {
                color: '#5EA2ED',
                interval: 0
            },
        },
        series: [{
            type: 'pictorialBar',

            data: [{
                name: '指标一',
                z: 100,
                value: 20,
                symbolSize: ['100%', '63%'],
                symbolPosition: 'center',
                symbolOffset: [152, '-600%'],
                symbol: 'image://../images/summary-bg.png',
            }, {
                name: '指标二',
                z: 90,
                value: 40,
                symbolSize: ['200%', '33%'],
                symbolPosition: 'center',
                symbolOffset: [-9.5, '-400%'],
                symbol: 'image://../images/summary-bg.png',
            }, {
                name: '指标三',
                z: 80,
                value: 60,
                symbolSize: ['225%', '33%'],
                symbolPosition: 'center',
                symbolOffset: [-6, '-145%'],
                symbol: 'image://../images/summary-bg.png',
            }, {
                name: '指标四',
                z: 70,
                value: 80,
                symbolSize: ['275%', '33%'],
                symbolPosition: 'center',
                symbolOffset: [-179, '-10%'],
                symbol: 'image://../images/summary-bg.png',
            }, {
                name: '指标五',
                z: 60,
                value: 100,
                symbolSize: ['335%', '33%'],
                symbolPosition: 'center',
                symbolOffset: [-175, '75%'],
                symbol: 'image://../images/summary-bg.png',
            }]
        }]
    };
    myChart.setOption(option);
};



// 折线图定制 (数据离散率挖掘)
(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: true,
            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",
                },

            },

        ],
    };

    if (xData.length < 4) {
        delete option.dataZoom
    }


    // 使用刚指定的配置项和数据显示图表。
    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();
//     });
// })();