数据可视化展示

水深无声 2023-02-27 05:44 20阅读 0赞

##### 数据可视化，现在可以说是非常受欢迎的，因为它可以通过图形化的设计就可以清晰的展示出各种数据。可以给领导展示出高逼格的前端可视化界面。从而省去了过多的数据展示。这次的文章就是使用 echarts 来实现如下图效果。 #####

[echarts链接][echarts]

### 效果图如下: ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1poYW9LYWlTWA_size_16_color_FFFFFF_t_70_pic_center]  
**案例中的背景图有需要的同学可以点我github链接**  
[github链接][github]

1.  第一步当然是引入我们的echarts啦

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js"></script>

1.  我们使用cdn来演示本次案例链接地址[cdn链接][cdn]
2.  需要一个父容器来放图表

<div id="main" style="width: 600px;height:400px;"></div>

1.  配置option
2.  显示配置项和图表

#### 代码我都已经注释和编写好了，有需要的小伙伴直接拿走。需要配置的就需要点击echart官网进行具体业务的配置啦~~~ ####

var myChart = echarts.init(document.getElementById('main'));
        var option = { 
            // 图例颜色
            color: ["#2BB7FF", "#FCB33A"],
            // 图例组件配置
            legend: { 
                data: ["商品房成交量", "二手房成交量"],
                // 图例中文字属性的配置
                textStyle: { 
                    color: "#BED7FA",
                    fontSize: 12
                }
            },
            // x轴的配置
            xAxis: [
                { 
                    // 坐标轴刻度
                    axisTick: { 
                        show: false
                    },
                    // 坐标轴轴线
                    axisLine: { 
                        lineStyle: { 
                            color: "#BED7FA",
                            opacity: "0.2"
                        }
                    },
                    // 坐标轴刻度标签的相关设置
                    axisLabel: { 
                        // x轴数据隔一个显示
                        interval: 1,
                    },
                    type: "category",
                    // 坐标轴两边留白策略
                    boundaryGap: false,
                    // x轴坐标的设置
                    data: [
                        "",
                        "2019/01",
                        "2019/02",
                        "2019/03",
                        "2019/04",
                        "2019/05",
                        "2019/06",
                        "2019/07",
                        "2019/08",
                        "2019/09",
                        "2019/10",
                        "2019/11",
                        "2019/12"
                    ]
                }
            ],
            // y轴的配置
            yAxis: { 
                axisTick: { 
                    show: false
                },
                axisLine: { 
                    lineStyle: { 
                        color: "#BED7FA",
                        opacity: "0.2"
                    }
                },
                // y轴配置 最小值 和 最大值
                min: 0,
                max: 80,
                // y轴每隔20进行显示
                interval: 20,
                type: "value",
                name: "库存量(套)",
                //网格线
                splitLine: { 
                    lineStyle: { 
                        type: "solid",
                        opacity: "0.1"
                    }
                },
                axisLabel: { 
                    formatter: "{value} K"
                },
                nameTextStyle: { 
                    padding: [0, 50, 0, 0]
                }
            },
            grid: { 
                left: 55
            },
            series: [
                { 
                    name: "商品房成交量",
                    type: "line",
                    // 拐点样式：隐藏
                    symbol: "none",
                    // 平滑曲线
                    smooth: true,
                    data: [63, 58, 68, 62, 58, 60, 62, 60, 65, 58, 60, 62, 60],
                    lineStyle: { 
                        color: "#FCB33A"
                    },
                    // 区域填充样式。线条区域渐变效果配置
                    areaStyle: { 
                        color: { 
                            type: "linear",
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                { 
                                    offset: 0,
                                    color: "rgba(252,179,58,0.45)" // 0% 处的颜色
                                },
                                { 
                                    offset: 0.5,
                                    color: "rgba(252,179,58,0.23)" // 50% 处的颜色
                                },
                                { 
                                    offset: 1,
                                    color: "rgba(252,179,58,0.00)" // 100% 处的颜色
                                }
                            ]
                        }
                    }
                },
                { 
                    name: "二手房成交量",
                    type: "line",
                    // 平滑曲线
                    smooth: true,
                    // 拐点样式：隐藏
                    symbol: "none",
                    lineStyle: { 
                        color: "#2BB7FF"
                    },
                    data: [23, 28, 23, 22, 28, 20, 22, 20, 25, 28, 20, 22, 20],
                    areaStyle: { 
                        color: { 
                            type: "linear",
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                { 
                                    offset: 0,
                                    color: "rgba(43,183,255,0.45)" // 0% 处的颜色
                                },
                                { 
                                    offset: 0.5,
                                    color: "rgba(43,183,255,0.23)" // 50% 处的颜色
                                },
                                { 
                                    offset: 1,
                                    color: "rgba(43,183,255,0.00)" // 100% 处的颜色
                                }
                            ]
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);

### 最后希望大家加油~~~ 不积跬步无以至千里，不积小流无以成江河， 每天进步一点点，踏上资深前端之路。 ###

[echarts]: https://echarts.apache.org/zh/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1poYW9LYWlTWA_size_16_color_FFFFFF_t_70_pic_center]: /images/20230209/1a04c53b6ebc415cabf05e0038877f2c.png
[github]: https://github.com/zhaokaiwin/Visualize-large-screen/tree/master/src/assets
[cdn]: https://www.bootcdn.cn/echarts/

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

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

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

素颜马尾好姑娘i/ 2024年02月20日 12:11/ 0 赞/ 9 阅读

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

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

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

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

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

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

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

效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dl

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

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

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

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

相关数据可视化展示

数据可视化，现在可以说是非常受欢迎的，因为它可以通过图形化的设计就可以清晰的展示出各种数据。可以给领导展示出高逼格的前端可视化界面。从而省去了过多的数据展示。这次的文章就是使

水深无声/ 2023年02月27日 05:44/ 0 赞/ 21 阅读

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

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

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

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

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

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