数据可视化展示

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

echarts链接

效果图如下:

案例中的背景图有需要的同学可以点我github链接
github链接

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

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

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

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

4. 配置option
5. 显示配置项和图表

代码我都已经注释和编写好了，有需要的小伙伴直接拿走。需要配置的就需要点击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);

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