课堂测试第三次（可视化）

1.利用echarts实现可视化，首先是绘制部分

//bar1
        var bar1_myChart = echarts.init(document.querySelector(".bar .chart"));
        var bar1_data=[["河北"],[300]]
        var bar1_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: bar1_data[0],
            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)"
                        //  1,
                        // type: "solid"
                }
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            }
        }],
        series: [{
            name: "销售利润",
            type: "bar",
            barWidth: "80%",
            data: bar1_data[1],
            itemStyle: {
                barBorderRadius: 5
            }
        }]
    };
        bar1_myChart.setOption(bar1_option);
        window.addEventListener("resize", function() {
        bar1_myChart.resize();
    });
//bar1

// line1
        var line1_myChart = echarts.init(document.querySelector(".line .chart"));
        var line1_data = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ]
    };
        var line1_option = {
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
            // 通过坐标轴来触发
            trigger: "axis"
        },
        legend: {
            // 距离容器10%
            right: "10%",
            // 修饰图例文字的颜色
            textStyle: {
                color: "#4c9bfd"
            }
            // 如果series 里面设置了name，此时图例组件的data可以省略
            // data: ["邮件营销", "联盟广告"]
        },
        grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            show: true,
            borderColor: "#012f4a",
            containLabel: true
        },

        xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月"
            ],
            // 去除刻度
            axisTick: {
                show: false
            },
            // 修饰刻度标签的颜色
            axisLabel: {
                color: "rgba(255,255,255,.7)"
            },
            // 去除x坐标轴的颜色
            axisLine: {
                show: false
            }
        },
        yAxis: {
            type: "value",
            // 去除刻度
            axisTick: {
                show: true
            },
            // 修饰刻度标签的颜色
            axisLabel: {
                color: "rgba(255,255,255,.7)"
            },
            // 修改y轴分割线的颜色
            splitLine: {
                lineStyle: {
                    color: "#012f4a"
                }
            }
        },
        series: [{
                name: "销售数量",
                type: "line",
                stack: "",
                smooth: true,
                data: line1_data.year[1]
            },
            {
                name: "销售金额",
                type: "line",
                stack: "",
                // 是否让线条圆滑显示
                smooth: true,
                data: line1_data.year[0]
            }
        ]
    };
        line1_myChart.setOption(line1_option);
        window.addEventListener("resize", function() {
        line1_myChart.resize();
    });
//line1


//line2
        var line2_myChart = echarts.init(document.querySelector(".line1 .chart"));
        line2_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",
                         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: [
                    300,
                    400,
                    3000,
                    4000,
                    7000,
                    8000,
                    9000,
                    10000,
                    12000,
                    13400,
                    14000,
                    14500,
                    15300,
                    15600,
                    15800,
                    16040,
                    16630,
                    17040,
                    17300,
                    17900,
                    18000,
                    18500,
                    18700,
                    19000,
                    19500,
                    19600,
                    20000,
                    20300,
                    21000,
                    21500
                ]
            },
            {
                name: "销售金额",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: "#00d887",
                         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: [
                    0,
                    0,
                    0,
                    1,
                    2,
                    3,
                    4,
                    4,
                    5,
                    5,
                    5,
                    10,
                    20,
                    30,
                    50,
                    40,
                    100,
                    120,
                    123,
                    140,
                    150,
                    160,
                    170,
                    180,
                    190,
                    200,
                    210,
                    220,
                    230,
                    240,
                    250
                ]
            }
        ]
    };
        line2_myChart.setOption(line2_option);
        window.addEventListener("resize", function() {
        lin2_myChart.resize();
    });
//line2

//bing2
        var bing2_myChart = echarts.init(document.querySelector(".pie1  .chart"));
        var bing2_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: [
            "#FF6EB4",
            "#ff9f7f",
            "#9fe6b8",
            "#32c5e9",
            "#FFF68F"
        ],
        series: [{
            name: "活跃度",
            type: "pie",
            // 如果radius是百分比则必须加引号
            radius: ["10%", "70%"],
            center: ["50%", "42%"],
            roseType: "radius",
            data: [
                { value: 26, name: "北京" },
                { value: 24, name: "山东" },
                { value: 25, name: "河北" },
                { value: 20, name: "江苏" },
                { value: 25, name: "浙江" }
            ],
            // 修饰饼形图文字相关的样式 label对象
            label: {
                fontSize: 10
            },
            // 修饰引导线样式
            labelLine: {
                // 连接到图形的线长度
                length: 10,
                // 连接到文字的线长度
                length2: 10
            }
        }]
    };
        bing2_myChart.setOption(bing2_option);
        window.addEventListener("resize", function() {
        bing2_myChart.resize();
    });
//bing2

2.ajax请求数据

        function get_b1_data() {
            $.ajax({
                url: "/b1_hive",
                success: function (data) {
                    bar1_option.xAxis[0].data=data.name;
                    bar1_option.series[0].data=data.value;
                    bar1_myChart.setOption(bar1_option);
                },
                error: function (xhr, type, errorThrown) {
                }
            })
        }
        function get_l2_data() {
            $.ajax({
                url: "/l2_hive",
                success: function (data) {
                    line1_option.xAxis.data=data.day;
                    line1_option.series[0].data = data.heal_add;
                    line1_option.series[1].data=data.dead_add;
                    line1_myChart.setOption(line1_option);
                },
                error: function (xhr, type, errorThrown) {
                }
            })
        }
        function get_r2_data() {
            $.ajax({
                url: "/r2_hive",
                success: function (data) {
                    //bing1_option.legend.data=data.name;
                    bing2_option.series[0].data=data.data;
                    bing2_myChart.setOption(bing2_option);
                },
                error: function (xhr, type, errorThrown) {
                }
            })
        }
        function get_l1_data() {
            $.ajax({
                url: "/l1_hive",
                success: function (data) {
                    line2_option.xAxis[0].data=data.day;
                    line2_option.series[0].data = data.confirm;
                    line2_option.series[1].data=data.dead;
                    line2_myChart.setOption(line2_option);
                },
                error: function (xhr, type, errorThrown) {
                }
            })
        }

3.效果展示