board-yp/js/water.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 = [{
        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"));

    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: {
                color: '#fff',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
            },
        },
        grid: {
            left: '0',
            right: '0',
            bottom: '30',
            top: '0',
            containLabel: true,
        },
        legend: {
            // 如果series 对象有name 值，则 legend可以不用写data
            itemGap: 20,
            itemHeight: 2,
            itemWidth: 15,
            icon: 'rect',
            textStyle: {
                color: "#fff"
            },
            top: "bottom",
        },
        xAxis: [{
            type: 'category',
            //	boundaryGap: true,//坐标轴两边留白
            data: ['三层到四层', '四层到五层', '七层到八层', '八层到九层', '九层到十层'],
            axisLabel: {
                textStyle: {
                    color: '#AADDFF',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                },
            },
            axisTick: {
                //坐标轴刻度相关设置。
                show: false,
            },
            axisLine: {
                //坐标轴轴线相关设置

            },
            splitLine: {
                //坐标轴在 grid 区域中的分隔线。
                show: false,
            },
        }, ],
        yAxis: [{
            type: 'value',
            splitNumber: 5,
            axisLabel: false,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#204C6F'],
                    opacity: 0.3,
                },
            },
            boundaryGap: ['0', '5%'],
        }],
        series: [{
                name: '正常',
                type: 'bar',
                data: [400, 180, 40, 30, 31],
                barWidth: '11',
                itemStyle: {
                    borderColor: "#0096FF",
                },
                barGap: '50%',
            },
            {
                name: '实际',
                type: 'bar',
                data: [500, 200, 50, 60, 36],
                barWidth: '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 = ['一到二层', '二到三层', '三到四层', '四到五层', '五到六层', '六到七层', '七到八层', '八到九层', '九到十层', '十到十一层', '十一到十二层', '十二到十三层']
        // var xData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, ]
        // 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}°C<br />{a1}: {c1}°C<br />{a2}: {c2}°C<br />时间2021年3月：{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();
//     });
// })();