board-yp/js/index.js

// 柱状图1模块
(function() {
    // 实例化对象
    var myChart = echarts.init(document.querySelector(".bar .chart"));
    // 指定配置和数据
    var option = {
        color: ["#2f89cf"],
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true
        },
        xAxis: [{
            type: "category",
            data: [
                "旅游行业",
                "教育培训",
                "游戏行业",
                "医疗行业",
                "电商行业",
                "社交行业",
                "金融行业"
            ],
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                }
            },
            axisLine: {
                show: false
            }
        }],
        yAxis: [{
            type: "value",
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                }
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                        // width: 1,
                        // type: "solid"
                }
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            }
        }],
        series: [{
            name: "直接访问",
            type: "bar",
            barWidth: "35%",
            data: [200, 300, 300, 900, 1500, 1200, 600],
            itemStyle: {
                barBorderRadius: 5
            }
        }]
    };

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

    // 数据变化
    var dataAll = [
        { year: "2019", data: [200, 300, 300, 900, 1500, 1200, 600] },
        { year: "2020", data: [300, 400, 350, 800, 1800, 1400, 700] }
    ];

    $(".bar h2 ").on("click", "a", function() {
        option.series[0].data = dataAll[$(this).index()].data;
        myChart.setOption(option);
    });
})();


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

    var sortData = [{
            sortName: "三相电压",
            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]
            ]
        },
        {
            sortName: "三相电流",
            data: [
                // 两个数组是因为有两条线
                [143, 19, 34, 40, 64, 191, 324, 290, 330, 310, 131, 165, 123, 178, 21, 82, 64, 43, 60, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ],
                [24, 52, 26, 27, 30, 35, 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, 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]
            ]
        },
        {
            sortName: "三相温度",
            data: [
                // 两个数组是因为有两条线
                [24, 52, 26, 27, 30, 35, 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],
                [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, ],
                [131, 165, 123, 178, 21, 82, 64, 43, 60, 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, ]
            ]
        }, {
            sortName: "漏电电流",
            data: [
                // 两个数组是因为有两条线
                [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, ],
                [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, 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: "15%",
            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();
    });

    // 点击切换效果
    $(".divergence .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];
        option.series[2].data = obj.data[2];

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

    });
})();

// 折线图定制 (电老化分析)
(function() {

    var sortData = [{
            sortName: "异常设备",
            data: [
                // 两个数组是因为有两条线
                [24, 52, 26, 27, 30, 35, 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, 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]
            ]
        },
        {
            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: [
            // 三个数组是因为有3条线
            [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, ],
            [24, 52, 26, 27, 30, 35, 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, 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(".hotAnalysis .chart"));
    // 2.指定配置
    var option = {

        color: ["#05EEE7", "#9999FF", "#FE92B3"], // 通过这个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(5,238,231,.6)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(5,238,231, 0.4)"
                                }
                            ],
                            false
                        ),
                    }
                },

                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(153,153,255,.6)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(153,153,255, 0.4)"
                                }
                            ],
                            false
                        ),
                    }
                },

                data: sortData[0].data[1]
            },
            {
                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[2]
            }
        ]
    };

    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(".bar1 .chart"));

//     var data = [70, 34, 60, 78, 69];
//     var titlename = ["HTML5", "CSS3", "javascript", "VUE", "NODE"];
//     var valdata = [702, 350, 610, 793, 664];
//     var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
//     option = {
//         //图标位置
//         grid: {
//             top: "10%",
//             left: "22%",
//             bottom: "10%"
//         },
//         xAxis: {
//             show: false
//         },
//         yAxis: [{
//                 show: true,
//                 data: titlename,
//                 inverse: true,
//                 axisLine: {
//                     show: false
//                 },
//                 splitLine: {
//                     show: false
//                 },
//                 axisTick: {
//                     show: false
//                 },
//                 axisLabel: {
//                     color: "#fff",

//                     rich: {
//                         lg: {
//                             backgroundColor: "#339911",
//                             color: "#fff",
//                             borderRadius: 15,
//                             // padding: 5,
//                             align: "center",
//                             width: 15,
//                             height: 15
//                         }
//                     }
//                 }
//             },
//             {
//                 show: true,
//                 inverse: true,
//                 data: valdata,
//                 axisLabel: {
//                     textStyle: {
//                         fontSize: 12,
//                         color: "#fff"
//                     }
//                 }
//             }
//         ],
//         series: [{
//                 name: "条",
//                 type: "bar",
//                 yAxisIndex: 0,
//                 data: data,
//                 barCategoryGap: 50,
//                 barWidth: 10,
//                 itemStyle: {
//                     normal: {
//                         barBorderRadius: 20,
//                         color: function(params) {
//                             var num = myColor.length;
//                             return myColor[params.dataIndex % num];
//                         }
//                     }
//                 },
//                 label: {
//                     normal: {
//                         show: true,
//                         position: "inside",
//                         formatter: "{c}%"
//                     }
//                 }
//             },
//             {
//                 name: "框",
//                 type: "bar",
//                 yAxisIndex: 1,
//                 barCategoryGap: 50,
//                 data: [100, 100, 100, 100, 100],
//                 barWidth: 15,
//                 itemStyle: {
//                     normal: {
//                         color: "none",
//                         borderColor: "#00c1de",
//                         borderWidth: 3,
//                         barBorderRadius: 15
//                     }
//                 }
//             }
//         ]
//     };

//     // 使用刚指定的配置项和数据显示图表。
//     myChart.setOption(option);
//     window.addEventListener("resize", function() {
//         myChart.resize();
//     });
// })();
// 折线图 优秀作品
// (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();
//     });
// })();