数据可视化展示（二）

下面这个案例，我们在很多项目中可能会用到类似的，废话不多说，直接开干。效果图如下：

js代码如下：

 var myChart = echarts.init(document.getElementById('main'));
    let option = {
        // 顶部
        legend: {
            data: ["城市总量", "城市处置量", "农村总量", "农村处置量"],
            textStyle: {
                color: "#BED7FA",
                fontSize: 12
            }
        },
        grid: {
            left: "0",
            right: "0",
            bottom: "0",
            containLabel: true
        },
        xAxis: {
            axisTick: {
                show: false
            },
            type: "category",
            axisLine: {
                lineStyle: {
                    color: "#BED7FA",
                    opacity: "0.1"
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#BED7FA",
                    type: "dashed"
                }
            },
            data: ["榆阳区", "米脂县", "绥德县"]
        },
        yAxis: [
            {
                axisTick: {
                    show: false
                },
                type: "value",
                name: "单位(套)",
                min: 0,
                max: 100,
                axisLine: {
                    lineStyle: {
                        color: "#BED7FA",
                        opacity: "0"
                    }
                },
                axisLabel: {
                    formatter: "{value} K"
                },
                splitLine: {
                    lineStyle: {
                        type: "solid",
                        opacity: "0.1"
                    }
                }
            }
        ],
        series: [
            {
                name: "城市处置量",
                type: "bar",
                barWidth: 10,
                // 合并两个柱子 命名必须与另外一个柱子命名相同
                stack: "城市",
                color: "#04A0FE",
                data: [10, 50, 60, 80, 20],
                itemStyle: {
                    normal: {
                        //柱形图圆角，初始化效果
                        // barBorderRadius: [0, 0, 40, 40],
                        barBorderRadius: [0, 0, 40, 40],
                        label: {
                            show: false //是否展示
                        }
                    }
                }
            },
            {
                name: "城市总量",
                type: "bar",
                color: "rgba(4,160,254,0.40)",
                barWidth: 10,
                stack: "城市",
                data: [50, 60, 70, 90, 35],
                itemStyle: {
                    normal: {
                        //柱形图圆角，初始化效果
                        barBorderRadius: [40, 40, 0, 0],
                        label: {
                            show: false //是否展示
                        }
                    }
                }
            },

            {
                name: "农村处置量",
                type: "bar",
                barWidth: 10,
                stack: "农村",
                color: "#FCB33A",
                data: [10, 20, 20, 50, 55],
                grid: {
                    top: "5% "
                },
                itemStyle: {
                    normal: {
                        //柱形图圆角，初始化效果
                        barBorderRadius: [0, 0, 40, 40],
                        label: {
                            show: false //是否展示
                        }
                    }
                }
            },
            {
                name: "农村总量",
                type: "bar",
                color: "rgba(252,179,58,0.40)",
                barWidth: 10,
                stack: "农村",
                data: [20, 30, 40, 50, 80],
                itemStyle: {
                    normal: {
                        //柱形图圆角，初始化效果
                        barBorderRadius: [40, 40, 0, 0],
                        label: {
                            show: false //是否展示
                        }
                    }
                }
            }
        ]
    };
    myChart.setOption(option);

大家加油~~~ 不积跬步无以至千里，不积小流无以成江河， 争取每天进步一点点。