封装了多个图表插件的数据可视化界面

所属分类:媒体,UI-图片展示,地图,布局

 68033  515  查看评论 (6)
分享到微信朋友圈
X
封装了多个图表插件的数据可视化界面 ie兼容10

请注意:请申请自己的的百度地图ak,否则会有授权提示,不能正常预览

申请地址:http://lbsyun.baidu.com/apiconsole/key


先声明一下:

该界面UI只允许用来参考学习,禁止商用!


在该demo中,我封装了两个插件: 一个列表界面,另一个是定制风格的柱形图图表

1.列表插件

var zzb = new CreateTip({
    id:"zongzhibiao",  //列表id,如果一个界面有多个列表,该id为必填
    titleName:"总指标",  //列表标题
    icon:"../icon/总指标.png",  //标题左侧的图标
    pos:{position:"fixed",top:90,left:16}, //列表位置
    width:270,  //插件宽度
});
zzb.setData(zhzb);  //填充数据  值为一段 html代码

2.柱形图图表  (本案例中,嵌套在列表窗口插件中)

var qywclpm = new CreateSpeed({
    id:"qywcspm",  //id
    icon:"../icon/区域完成数排名.png",  //标题旁的图标
    title:"区域完成数排名", //标题名
    max:1300  //最大值 如果你传的数据是具体的值,最大值必写  如果你的数据是百分数,最大值不用写
}); 
//填充数据
qywclpm.setData([
    {"name":"中部","data":"99.4%","color":"#55DAED"},
    {"name":"东部","data":"98%","color":"#55B6ED"},
    {"name":"西部","data":"88%","color":"#3F80D2"},
    {"name":"北部","data":"86%","color":"#2B5DB8"},
    {"name":"南部","data":"70%","color":"#1864E3"}
]);
相关插件-图片展示,地图,布局

纯js写的祝愿墙

这是一款纯js编写的祝愿墙,墙上的祝福标签的位置随机出现,每次刷新,出现的位置各不相同。
  图片展示
 28318  352

jQuery图片放大镜

实现如京东等网站放大缩小效果
  图片展示
 26178  317

jQuery鼠标滚轮放大缩小查看图片(原创)

使用jquery实现点击放大图片之后,使用鼠标滚轮放大缩小图片,点击遮罩关闭图片
  图片展示
 58280  378

jQuery背景墙聚光灯效果代码

jQuery背景墙聚光灯效果代码
  图片展示
 30328  329

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    kindness 先生♂ 0
    2019/9/24 8:57:32
    百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥,或此密钥未对本应用的百度地图JavaScriptAPI授权。您可以访问如下网址了解如何获取有效的密钥:http://lbsyun.baidu.com/apiconsole/key#。这个是啥情况?
        areyouOk1
        2019/9/24 9:31:18

        作者提供的百度地图kdy过期了,需要自己申请一个。正常项目中都是用自己申请的key哦。

        ELLIPSIS0
        2019/9/24 16:09:25
        自己去平台申请一个就行
    回复
    SiriBen 0
    2019/8/28 10:23:43
    数据没和地图作同步吗? 回复
    qinjiahao 0
    2018/12/20 23:56:45
    ft3356054 0
    2018/12/19 16:30:31
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复