草稿

## BarChart ```js data: { xAxisName: '名称',//x轴--所属类型或单位或是代表的含义 yAxisName: '人数',//x轴--所属类型或单位或是代表的含义 xAxisData: ["分队1", "分队2", "分队3", "分队4", "分队5", "分队6", "分队7"],//x轴的数据 yData: [220, 182, 191, 234, 290, 330, 310],//y轴数据 } ``` ## BarTransverseChart ```js data: { legendData: ["使用时长", "使用年限"],//图例(当xAxisData有多条数据时加上此属性) xAxisData: [ {//可多个 isShow:true,//x轴单位数据是否显示,当有x轴有多个时,可设置哪条不显示 name: "人数",//x轴单位、含义 type:"value",//x值类型 position:"bottom",//x轴显示位置 data: null//x轴数据 } ], yAxisData: [ {//暂未有多个 name: "证书种类",//y轴单位 type:"category",//y轴类型 data: ["证书1", "证书2", "证书3", "证书4", "证书5", "证书6", "证书7"]//y轴数据 } ], seriesData:[//数据及样式 { barWidth:"16",//柱状图的宽度 color:["#2bce9d","#3fe9b5"],//柱状图的颜色 name:null,//-----忘记为什么要加了,可以先加上 data:[22, 33, 44, 55, 66, 77, 88]//数据 } ], } ``` ## BarTransverseChart2 ```js data: { yDate1: ["设备1", "设备2", "设备3", "设备4", "设备5"],//y轴一侧的数据 yDate2: [150, 134, 114, 183, 145],//y轴另一侧的数据 seriesData: [150, 134, 114, 183, 145],//柱状图反应的数据长度 } ``` ## PolygonalChart ```js data: { xAxisName: '政治面貌',//x轴代表的数据单位、含义 yAxisName: '人数',//y轴代表的数据的单位、含义 xAxisData: ["团员", "党员", "群众"],//x轴数据 yData: [28, 12, 6, 28, 7, 6, 3],//y轴数据 } ``` ## PolygonalChart2 ```js data: { color:["#3398DB"],//颜色 xAxisData: [ { name:"时",//x轴代表的单位、含义 value:["2","4","6","8","10","12","14","16","18","20","22","24"]//x轴数据 } ], yAxisData:["kwh"],//y轴数据的单位、含义 seriesData:[ { name:"总电量",//是什么数据 value:[246, 250, 160, 451, 455, 148, 243, 143, 156, 258, 160, 142]//数据的值 } ] } ``` ## BarPolygonaChart ```js data: { legendData: ["系统分配", "手动添加", "未接收", "已接收", "已完成"],//图例 xAxisName: '月',//x轴单位、含义(非必要) xAxisData: ["2015", "2016", "2017", "2018", "2019"],//x轴数据 yAxisData: ["故障来源(个)", "处理结果(个)"],//y轴数据,若只有一个["能耗(KW/h)",""] seriesData: [ {//若柱状图有背景需加上此对象 name: "背景",//背景柱 type:"bar",//背景是个柱 color:null,//背景的颜色 hasBG:true,//有否要背景 bgbarWidth: "70%",//背景的宽度 bgbarGap: "-75%",//背景间的距离 hasStack:false,// color:["rgba(47, 151, 226, 0)","rgba(47, 151, 226, 0.4)"],//背景颜色是个渐变 data: [250, 250, 250, 250, 250,250, 250, 250, 250, 250, 250, 250],//背景数据 }, {//数据类型是柱,可多个 name: '系统分配',//数据1名称 type:'bar',//数据1类型是柱(线、柱)-(line、bar) color:["#11eed6","#31f2c9"],//数据1颜色 barWidth:15,//数据1(类型是柱时加上) hasStack:true,//忘记代表什么含义了 data: [50, 200, 100, 80, 180],//数据1 }, { //数据类型时线,可多条 name: '未接收',//数据2名称 type:'line',//数据2类型是线 color:["#f90","#f90"],//数据2颜色 data: [15, 10, 22, 18, 24],//数据2 }, ] } }, ``` ## RingChart ```js data: { text: 8000,//中间现实的数值 subtext: '工程总人数范围',//中间显示的文字 legendData: ["将官", "士兵", "校官", "尉官"],//图例 rankData: [//数值 { value: 2392, name: "将官" }, { value: 1922, name: "士兵" }, { value: 1862, name: "校官" }, { value: 3200, name: "尉官" } ] } ``` ## RingChart2 ```js data: { scaleData: [ { name: "专业类型1", value: 10 }, { name: "专业类型2", value: 10 }, { name: "专业类型3", value: 10 }, { name: "专业类型4", value: 10 }, { name: "专业类型5", value: 10 }, { name: "专业类型6", value: 10 } ] } ``` ## RingChart3 ```js data:{ intervalvValue: 1.4, // 两曲线环间距 scaleData:[//数据 { name: "待接收", value: 20 }, { name: "已完成", value: 15 }, { name: "处理中", value: 10 } ], colorData:[["#01c0e0","#00a8ec"],["#70fbaf","#547be2"],["#726ef5","#726ef5"],["#726ef5","#726ef5"]],//组成颜色 titleDta:{ text:"任务状态",//中间显示内容 x: "45%",//text显示位置 }, legendData:{//图例 data: ["待接收", "已完成", "处理中"] }, seriesData:{暂未做其他设置,后续可添加 center:["50%", "50%"]//数据显示位置 } } ``` ## RingsChart ```js data: { dataArray: [//数据 { value: 1, //值 name: "一般", //名称 id: "001", parentId: "0" //父级 }, { value: 0, name: "通风", id: "001", parentId: "001" }, { value: 0, name: "给排水", id: "002", parentId: "001" }, { value: 0, name: "电气", id: "003", parentId: "001" }, { value: 1, name: "消防", id: "004", parentId: "001" }, { value: 0, name: "防护", id: "005", parentId: "001" }, { value: 0, name: "土建", id: "006", parentId: "001" }, { value: 2, name: "严重", id: "002", parentId: "0" }, { value: 1, name: "通风", id: "001", parentId: "002" }, { value: 0, name: "给排水", id: "002", parentId: "002" }, { value: 0, name: "电气", id: "003", parentId: "002" }, { value: 0, name: "消防", id: "004", parentId: "002" }, { value: 0, name: "防护", id: "005", parentId: "002" }, { value: 1, name: "土建", id: "006", parentId: "002" }, { value: 0, name: "紧急", id: "003", parentId: "0" }, { value: 0, name: "通风", id: "001", parentId: "003" }, { value: 0, name: "给排水", id: "002", parentId: "003" }, { value: 0, name: "电气", id: "003", parentId: "003" }, { value: 0, name: "消防", id: "004", parentId: "003" }, { value: 0, name: "防护", id: "005", parentId: "003" }, { value: 0, name: "土建", id: "006", parentId: "003" }, ] } ``` ## RingsChart2 ![image.png](https://cos.easydoc.net/22492964/files/k080acf1.png) ```js data: { seriesData: [ { name: "任务来源",//数据1代表含义 data: [//数据1 { value: 6, name: "维护任务" }, { value: 5, name: "设备故障" }, { value: 6, name: "备品备件" }, { value: 5, name: "物资情况" }, { value: 6, name: "环境报警" }, { value: 5, name: "应急任务" } ] }, { name: "报警来源",//数据2代表含义 data: [//数据2 { value: 15, name: "误报" }, { value: 12, name: "处理" }, { value: 8, name: "厂商协助" } ] } ] } ``` ## PieChart ![image.png](https://cos.easydoc.net/22492964/files/k0807bv2.png) ![image.png](https://cos.easydoc.net/22492964/files/k080659c.png) ```js data: { titleData:[ {//饼图标题(非必要)-可多条 text:"系统检测(报警)", x:"20%", y:"5%" } ], legendData: [],//图例非必要 seriesData: [ {//数据---可多条 name:"系统检测(报警)", data:[ { value: 456, name: "消防" }, { value: 251, name: "入侵" }, { value: 456, name: "核生化" }, { value: 251, name: "核电磁脉冲攻击" }, { value: 251, name: "其他" } ], center:["25%", "50%"]/饼图放置位置 } ], color: [ '#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea']//组成颜色 } ```