数据可视化展示（二）

本是古典何须时尚 2023-02-28 01:59 4阅读 0赞

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

![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1poYW9LYWlTWA_size_16_color_FFFFFF_t_70_pic_center]

#### 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);

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1poYW9LYWlTWA_size_16_color_FFFFFF_t_70_pic_center]: /images/20230209/44e62e65faa64fd9b0396a56bc5201a4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关数据可视化——使用echars图表展示

1. 功能强大，支持多种图表类型；2. 可以灵活定制图表风格；3. 支持数据动态更新和响应式布局。1. 对初学者来说，上手难度较大；2. 部分高级功能需要付费使用。1. ...

小鱼儿/ 2024年05月06日 23:25/ 0 赞/ 73 阅读

相关 ECharts数据可视化项目-大屏数据可视化展示-echarts 图表制作

一.课程[技术栈][Link 1] ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAY

我就是我/ 2024年04月01日 17:53/ 0 赞/ 137 阅读

相关大数据库可视化模版50：大数据可视化展示平台通用模板

> 博主介绍：《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。 > 所有项

Dear 丶/ 2024年02月20日 12:10/ 0 赞/ 48 阅读

相关大数据库可视化模版31：数据可视化大屏展示系统

> 博主介绍：《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。 > 所有项

偏执的太偏执、/ 2024年02月20日 12:08/ 0 赞/ 53 阅读

相关 echarts 可视化数据展示竖柱状图

效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dl

左手的ㄟ右手/ 2023年06月22日 05:22/ 0 赞/ 188 阅读

相关 echarts 可视化数据展示雷达图

效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dl

水深无声/ 2023年06月22日 05:21/ 0 赞/ 3 阅读

相关数据可视化展示（二）

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

本是古典何须时尚/ 2023年02月28日 01:59/ 0 赞/ 5 阅读

相关 Python可视化图表可以展示哪些数据关系？

前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。作者：屈希峰，资深Python工程师，知乎

川长思鸟来/ 2022年12月23日 15:21/ 0 赞/ 217 阅读

相关 Python疫情数据爬取与可视化展示

[疫情数据爬取与可视化展示][Link 1] 使用Python爬取腾讯新闻疫情数据，并使用pyecharts可视化，绘制国内、国际日增长人数地图，matplotlib绘制

亦凉/ 2022年11月11日 06:37/ 0 赞/ 257 阅读

相关 ECharts数据可视化——图表展示制作内容介绍

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

待我称王封你为后i/ 2021年07月25日 13:29/ 0 赞/ 716 阅读