全网最详细教写可视化面板(js、css3、html5)(四)

简介: 全网最详细教写可视化面板(js、css3、html5)(四)

json:

[
    {
        "first": [
            {
                "name": "服装",
                "type": "bar",
                "data": [
                    {
                        "name": "一月",
                        "value": 5000
                    },
                    {
                        "name": "二月",
                        "value": 6500
                    },
                    {
                        "name": "三月",
                        "value": 4300
                    },
                    {
                        "name": "四月",
                        "value": 5700
                    },
                    {
                        "name": "五月",
                        "value": 5970
                    }
                ]
            },
            {
                "name": "饰品",
                "type": "bar",
                "data": [
                    {
                        "name": "一月",
                        "value": 5050
                    },
                    {
                        "name": "二月",
                        "value": 6900
                    },
                    {
                        "name": "三月",
                        "value": 7300
                    },
                    {
                        "name": "四月",
                        "value": 6700
                    },
                    {
                        "name": "五月",
                        "value": 2970
                    }
                ]
            },
            {
                "name": "食品",
                "type": "bar",
                "data": [
                    {
                        "name": "一月",
                        "value": 7000
                    },
                    {
                        "name": "二月",
                        "value": 8500
                    },
                    {
                        "name": "三月",
                        "value": 6200
                    },
                    {
                        "name": "四月",
                        "value": 8700
                    },
                    {
                        "name": "五月",
                        "value": 9970
                    }
                ]
            }
        ]
    },
    {
        "value": 1048,
        "mave": 12657
    },
    {
        "name": "一号",
        "data": [
            {
                "name": "营业",
                "data": [
                    {
                        "name": "周",
                        "data": [
                            {
                                "wan": 1,
                                "tu": 1,
                                "sui": 1,
                                "fo": 1,
                                "fai": ".",
                                "sks": 1
                            },
                            {
                                "value": "25.6"
                            },
                            {
                                "value": "1234"
                            }
                        ]
                    },
                    {
                        "name": "月",
                        "data": [
                            {
                                "wan": 2,
                                "tu": 2,
                                "sui": 2,
                                "fo": 2,
                                "fai": ".",
                                "sks": 2
                            },
                            {
                                "value": "22.6"
                            },
                            {
                                "value": "2234"
                            }
                        ]
                    },
                    {
                        "name": "年",
                        "data": [
                            {
                                "wan": 4,
                                "tu": 8,
                                "sui": 8,
                                "fo": 6,
                                "fai": ".",
                                "sks": 2
                            },
                            {
                                "value": "2.6"
                            },
                            {
                                "value": "80234"
                            }
                        ]
                    }
                ]
            },
            {
                "name": "业绩",
                "data": [
                    {
                        "name": "营业",
                        "data": [
                            {
                                "name": "周",
                                "data": [
                                    {
                                        "wan": 1,
                                        "tu": 2,
                                        "sui": 2,
                                        "fo": 3,
                                        "fai": ".",
                                        "sks": 3
                                    },
                                    {
                                        "value": "15.6"
                                    },
                                    {
                                        "value": "2234"
                                    }
                                ]
                            },
                            {
                                "name": "月",
                                "data": [
                                    {
                                        "wan": 3,
                                        "tu": 3,
                                        "sui": 4,
                                        "fo": 1,
                                        "fai": ".",
                                        "sks": 5
                                    },
                                    {
                                        "value": "32.6"
                                    },
                                    {
                                        "value": "6234"
                                    }
                                ]
                            },
                            {
                                "name": "年",
                                "data": [
                                    {
                                        "wan": 9,
                                        "tu": 8,
                                        "sui": 8,
                                        "fo": 6,
                                        "fai": " .",
                                        "sks": 2
                                    },
                                    {
                                        "value": "22.6"
                                    },
                                    {
                                        "value": "200234"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

img:

还有几个svg自己找

效果图:

相关文章
|
23天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
105 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
21天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
48 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
20天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
61 34
|
23天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
70 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
115 24
|
2月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
406 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
2月前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
55 13
|
2月前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
57 3
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
|
前端开发 测试技术
html+css+js+jQuery学习笔记(一)
html+css+js+jQuery学习笔记
136 0
html+css+js+jQuery学习笔记(一)