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

 查看演示  website  立即下载

请注意：请申请自己的的百度地图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"}
]);

PREVIOUS:
NEXT:
自适应的字数统计插件(原创)
基于Swiper4 实现的页面拖拽左右滑动效果