/** * 大屏内容元素 */ export const datavToolMap = { chart: { desc: '大屏图表', items: [ { type: 'chart', name: '折线图', alias: 'line', height: 440, width: 600, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/icon-line.png'), template: require('@/assets/img/datav/tp-line.png'), desc: '', options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: '', dbType: 'varchar'}, yField: [], designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, deepColor: false, switchingFrequency: 2, option: { title: { text: '周销售额趋势', subtext: '纯属虚构', textStyle: { fontSize: 18, fontWeight: 'normal', color: '#fff', //标题颜色 }, left: 'left', }, lineSmooth: true, xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // 改变x轴颜色 axisLine: { lineStyle: { color: '#fff', }, }, // 改变x轴字体颜色和大小 axisLabel: { textStyle: { color: '#fff', }, }, }, yAxis: { type: 'value', // 改变y轴颜色 axisLine: { show: true, lineStyle: { color: '#fff', }, }, }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', }, ], }, }, }, { type: 'chart', name: '柱状图', alias: 'bar', height: 440, width: 600, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/icon-bar.png'), template: require('@/assets/img/datav/tp-bar.png'), desc: '', options: { dataFrom: 'database', datadataAlias: '', xField: {alias: '', desc: ''}, yField: [], designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, deepColor: false, switchingFrequency: 2, option: { title: { text: '周销售额趋势', subtext: '纯属虚构', textStyle: { fontSize: 18, fontWeight: 'normal', color: '#fff', //标题颜色 }, left: 'left', }, xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // 改变x轴颜色 axisLine: { lineStyle: { color: '#fff', }, }, // 改变x轴字体颜色和大小 axisLabel: { textStyle: { color: '#fff', }, }, }, yAxis: { type: 'value', // 改变y轴颜色 axisLine: { show: true, lineStyle: { color: '#fff', }, }, }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', }, ], }, }, }, { type: 'chart', name: '饼状图', alias: 'pie', height: 440, width: 600, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/icon-pie.png'), template: require('@/assets/img/datav/tp-pie.png'), desc: '', options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: ''}, yField: {alias: '', desc: ''}, designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, deepColor: false, switchingFrequency: 2, option: { title: { text: '畅销饮料占比饼状图', subtext: '纯属虚构', textStyle: { fontSize: 18, fontWeight: 'normal', color: '#fff', //标题颜色 }, left: 'left', }, series: [ { type: 'pie', data: [ {name: '可口可乐', value: 93}, {name: '百事可乐', value: 32}, {name: '哇哈哈', value: 65}, {name: '康师傅', value: 44}, {name: '统一', value: 52}, ], insideLabel: { show: true, }, }, ], }, }, }, { type: 'chart', name: '雷达图', alias: 'radar', height: 440, width: 600, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/icon-radar.png'), template: require('@/assets/img/datav/tp-radar.png'), desc: '', options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: ''}, yField: [], designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, deepColor: false, switchingFrequency: 2, option: { title: { show: true, textStyle: { fontStyle: 'normal', fontFamily: 'sans-serif', fontSize: 18, }, left: 'auto', top: 'auto', subtext: '纯属虚构', text: '学习雷达图', }, tooltip: {}, toolbox: { feature: { saveAsImage: {}, }, }, legend: { show: true, type: 'plain', left: 'auto', top: 30, orient: 'horizontal', data: ['张三', '李四', '王五'], }, grid: { top: 80, }, series: [ { type: 'radar', data: [ { name: '张三', value: [120, 88, 94], areaStyle: { opacity: '0', }, }, { name: '李四', value: [67, 111, 113], areaStyle: { opacity: '0', }, }, { name: '王五', value: [78, 66, 99], areaStyle: { opacity: '0', }, }, ], itemStyle: { emphasis: { areaStyle: { opacity: '0', }, }, }, areaStyle: { color: { type: 'radial', colorStops: [ { offset: 0, color: 'rgba(137, 190, 252, 0.00)', }, { offset: 1, color: 'rgba(137, 190, 252, 0.5)', }, ], }, }, }, ], radar: { axisName: { fontSize: 14, color: '#6D7278', }, axisLine: { lineStyle: { color: '#ebeef3', }, }, shape: 'circle', triggerEvent: false, indicator: [ { name: '数学', }, { name: '语文', }, { name: '英语', }, ], }, }, }, }, { type: 'chart', name: '仪表图', alias: 'gauge', height: 440, width: 600, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/icon-gauge.png'), template: require('@/assets/img/datav/tp-gauge.png'), desc: '', options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: ''}, yField: [], designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, deepColor: false, switchingFrequency: 2, option: { title: { text: '剩余油量表', subtext: '纯属虚构', textStyle: { fontSize: 18, fontWeight: 'normal', color: '#fff', //标题颜色 }, left: 'left', }, tooltip: { trigger: 'item', formatter: '{a}
{b} : {c}%', }, series: [ { name: 'Pressure', type: 'gauge', detail: { formatter: '{value}', }, data: [ { value: 55, name: 'SCORE', }, ], }, ], // series: [ // { // type: 'gauge', // data: [ { name: 'itemA', value: 55 } ], // axisLabel: { // formatter: '{value}%' // }, // animationCurve: 'easeInOutBack' // } // ] }, }, }, { type: 'chart', name: '关系图', alias: 'relation', height: 440, width: 600, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/tp-guanxi.png'), template: require('@/assets/img/datav/tp-guanxi.png'), desc: '', customOption: '', options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: ''}, yField: [], needNotData: true, // 不是必须数据 designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, deepColor: false, switchingFrequency: 2, option: { title: { text: '简单关系图', subtext: '纯属虚构', textStyle: { fontSize: 18, fontWeight: 'normal', color: '#fff', //标题颜色 }, left: 'left', }, tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', series: [ { type: 'graph', layout: 'none', symbolSize: 50, roam: true, label: { show: true, }, edgeSymbol: ['circle', 'arrow'], edgeSymbolSize: [4, 10], edgeLabel: { fontSize: 20, }, data: [ { name: 'Node 1', x: 300, y: 300, }, { name: 'Node 2', x: 800, y: 300, }, { name: 'Node 3', x: 550, y: 100, }, { name: 'Node 4', x: 550, y: 500, }, ], // links: [], links: [ { source: 'Node 1', target: 'Node 2', label: { show: true, }, lineStyle: { curveness: 0.2, }, }, { source: 'Node 2', target: 'Node 1', label: { show: true, }, lineStyle: { curveness: 0.2, }, }, { source: 'Node 1', target: 'Node 3', }, { source: 'Node 2', target: 'Node 3', }, { source: 'Node 2', target: 'Node 4', }, { source: 'Node 1', target: 'Node 4', }, ], lineStyle: { opacity: 0.9, width: 2, curveness: 0, }, }, ], }, }, }, ], }, elements: { desc: '大屏组件', items: [ { type: 'datav', name: '动态环图', alias: 'ring-chart', height: 300, width: 300, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/icon-ring-chart.png'), desc: '', options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: '', dbType: 'varchar'}, yField: {alias: '', desc: '', dbType: 'number'}, designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, config: { radius: '50%', //环半径 activeRadius: '55%', //环半径（动态） lineWidth: 20, //环线条宽度 activeTimeGap: 3000, //切换间隔(ms) digitalFlopToFixed: 0, //数字翻牌器小数位数 digitalFlopUnit: '', //数字翻牌器单位 animationCurve: 'easeOutCubic', //动效曲线 showOriginValue: false, //显示原始值 data: [ { name: '周口', value: 55, }, { name: '南阳', value: 120, }, { name: '西峡', value: 78, }, { name: '驻马店', value: 66, }, { name: '新乡', value: 80, }, ], }, }, }, { type: 'datav', name: '胶囊柱图', alias: 'capsule-chart', height: 300, width: 300, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/icon-capsule-chart.png'), desc: '', options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: '', dbType: 'varchar'}, yField: {alias: '', desc: '', dbType: 'number'}, designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, config: { unit: '', //单位 showValue: false, //显示数值 data: [ { name: '南阳', value: 167, }, { name: '周口', value: 67, }, { name: '漯河', value: 123, }, { name: '郑州', value: 55, }, { name: '西峡', value: 98, }, ], }, }, }, { type: 'datav', name: '水位图', alias: 'water-level-pond', height: 200, width: 150, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/icon-water-level-pond.png'), desc: '', options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: '', dbType: 'varchar'}, yField: {alias: '', desc: '', dbType: 'number'}, designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, config: { shape: 'roundRect', waveNum: 3, waveHeight: 40, waveOpacity: 0.4, formatter: '{value}%', data: [66, 42, 33], }, }, }, { type: 'datav', name: '进度池', alias: 'percent-pond', height: 100, width: 200, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/icon-percent-pond.png'), options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: '', dbType: 'varchar'}, yField: {alias: '', desc: '', dbType: 'number'}, designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, config: { borderWidth: 3, borderGap: 3, textColor: '#fff', borderRadius: 5, localGradient: false, value: 66, }, }, }, { type: 'datav', name: '飞线图', alias: 'flyline-chart', height: 300, width: 300, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/icon-flyline-chart.png'), desc: '', options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: '', dbType: 'varchar'}, yField: {alias: '', desc: '', dbType: 'number'}, designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, config: { text: { color: '#ffdb5c', fontSize: 12, }, halo: { show: true, duration: 30, color: '#fb7293', radius: 120, }, centerPoint: [0.48, 0.35], centerPointStr: '[0.48, 0.35]', pointsStr: '', lineWidth: 1, flylineColor: '#ffde93', duration: [20, 30], durationStr: '[20, 30]', curvature: 5, flylineRadius: 100, points: [ { position: [0.52, 0.235], text: '新乡', }, { position: [0.43, 0.29], text: '焦作', }, { position: [0.59, 0.35], text: '开封', }, { position: [0.53, 0.47], text: '许昌', }, { position: [0.45, 0.54], text: '平顶山', }, { position: [0.36, 0.38], text: '洛阳', }, { position: [0.62, 0.55], text: '周口', }, { position: [0.56, 0.56], text: '漯河', }, { position: [0.37, 0.66], text: '南阳', }, { position: [0.55, 0.81], text: '信阳', }, { position: [0.55, 0.67], text: '驻马店', }, { position: [0.37, 0.29], text: '济源', }, { position: [0.2, 0.36], text: '三门峡', }, { position: [0.76, 0.41], text: '商丘', }, { position: [0.59, 0.18], text: '鹤壁', }, { position: [0.68, 0.17], text: '濮阳', }, { position: [0.59, 0.1], text: '安阳', }, ], k: 1.0, bgImgFileId: '', bgImgFileName: '', bgImgUrl: require('@/assets/img/flylineChart/map.jpg'), centerPointImg: { width: 40, height: 40, url: require('@/assets/img/flylineChart/mapCenterPoint.png'), fileId: '', fileName: '', }, pointsImg: { width: 40, height: 40, url: require('@/assets/img/flylineChart/mapPoint.png'), fileId: '', fileName: '', }, }, }, }, { type: 'datav', name: '飞线图增强版', alias: 'flyline-chart-enhanced', height: 300, width: 300, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/icon-flyline-chart.png'), desc: '', options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: '', dbType: 'varchar'}, yField: [], designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, config: { halo: { show: false, duration: 30, color: '#fb7293', radius: 120, }, centerPoint: [0.48, 0.35], centerPointStr: '[0.48, 0.35]', line: { width: 1, color: '#ffde93', duration: [20, 30], durationStr: '[20, 30]', radius: 100, }, k: -1.0, curvature: 5, flylineRadius: 100, pointsStr: '', points: [ { name: '郑州', coordinate: [0.48, 0.35], halo: { show: true, }, icon: { src: require('@/assets/img/flylineChart/mapCenterPoint.png'), width: 30, height: 30, }, text: { show: false, }, }, { name: '新乡', coordinate: [0.52, 0.23], }, { name: '焦作', coordinate: [0.43, 0.29], }, { name: '开封', coordinate: [0.59, 0.35], }, { name: '许昌', coordinate: [0.53, 0.47], }, { name: '平顶山', coordinate: [0.45, 0.54], }, { name: '洛阳', coordinate: [0.36, 0.38], }, { name: '周口', coordinate: [0.62, 0.55], halo: { show: true, color: '#8378ea', }, }, { name: '漯河', coordinate: [0.56, 0.56], }, { name: '南阳', coordinate: [0.37, 0.66], halo: { show: true, color: '#37a2da', }, }, { name: '信阳', coordinate: [0.55, 0.81], }, { name: '驻马店', coordinate: [0.55, 0.67], }, { name: '济源', coordinate: [0.37, 0.29], }, { name: '三门峡', coordinate: [0.2, 0.36], }, { name: '商丘', coordinate: [0.76, 0.41], }, { name: '鹤壁', coordinate: [0.59, 0.18], }, { name: '濮阳', coordinate: [0.68, 0.17], }, { name: '安阳', coordinate: [0.59, 0.1], }, ], linesStr: '', lines: [ { source: '新乡', target: '郑州', }, { source: '焦作', target: '郑州', }, { source: '开封', target: '郑州', }, { source: '周口', target: '郑州', color: '#fb7293', width: 2, }, { source: '南阳', target: '郑州', color: '#fb7293', width: 2, }, { source: '济源', target: '郑州', }, { source: '三门峡', target: '郑州', }, { source: '商丘', target: '郑州', }, { source: '鹤壁', target: '郑州', }, { source: '濮阳', target: '郑州', }, { source: '安阳', target: '郑州', }, { source: '许昌', target: '南阳', color: '#37a2da', }, { source: '平顶山', target: '南阳', color: '#37a2da', }, { source: '洛阳', target: '南阳', color: '#37a2da', }, { source: '驻马店', target: '周口', color: '#8378ea', }, { source: '信阳', target: '周口', color: '#8378ea', }, { source: '漯河', target: '周口', color: '#8378ea', }, ], icon: { show: true, src: require('@/assets/img/flylineChart/mapPoint.png'), width: 40, height: 40, fileId: '', fileName: '', }, text: { show: true, color: '#ffdb5c', fontSize: 12, }, bgImgFileId: '', bgImgFileName: '', bgImgSrc: require('@/assets/img/flylineChart/map.jpg'), }, }, }, { type: 'datav', name: '锥状图', alias: 'conical-column-chart', height: 200, width: 400, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/conical-column-chart.png'), desc: '', options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: '', dbType: 'varchar'}, yField: [], designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, config: { fontSize: 12, textColor: '#fff', data: [ { name: '周口', value: 55, }, { name: '南阳', value: 120, }, { name: '西峡', value: 71, }, { name: '驻马店', value: 66, }, { name: '新乡', value: 80, }, { name: '信阳', value: 35, }, { name: '漯河', value: 15, }, ], // img: [ // '/img/conicalColumnChart/1st.png', // '/img/conicalColumnChart/2st.png', // '/img/conicalColumnChart/3st.png', // '/img/conicalColumnChart/4st.png', // '/img/conicalColumnChart/5st.png', // '/img/conicalColumnChart/6st.png', // '/img/conicalColumnChart/7st.png' // ], showValue: true, }, }, }, { type: 'datav', name: '翻牌器', alias: 'digital-flop', height: 50, width: 200, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/digital-flop.png'), desc: '', options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: '', dbType: 'varchar'}, yField: {alias: '', desc: '', dbType: 'number'}, designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, config: { content: '{nt}个', toFixed: 0, animationCurve: 'easeOutCubic', animationFrame: 50, number: [100], }, }, }, { type: 'datav', name: '轮播表', alias: 'scroll-board', height: 220, width: 500, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/scroll-board.png'), desc: '', options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: '', dbType: 'varchar'}, yField: [], designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, config: { showHeader: false, headerJson: '', header: [], rowNum: 5, headerBGC: '#00BAFF', oddRowBGC: '#003B51', evenRowBGC: '#0A2732', waitTime: 2000, headerHeight: 35, index: false, carousel: 'single', hoverPause: true, data: [ ['行1列1', '行1列2', '行1列3'], ['行2列1', '行2列2', '行2列3'], ['行3列1', '行3列2', '行3列3'], ['行4列1', '行4列2', '行4列3'], ['行5列1', '行5列2', '行5列3'], ['行6列1', '行6列2', '行6列3'], ['行7列1', '行7列2', '行7列3'], ['行8列1', '行8列2', '行8列3'], ['行9列1', '行9列2', '行9列3'], ['行10列1', '行10列2', '行10列3'], ], }, }, }, { type: 'datav', name: '排名轮播表', alias: 'scroll-ranking-board', height: 300, width: 500, x: 10, y: 10, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 icon: require('@/assets/img/datav/scroll-ranking-board.png'), desc: '', options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: '', dbType: 'varchar'}, yField: {}, designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, config: { rowNum: 5, waitTime: 2000, carousel: 'single', unit: '', sort: true, data: [ { name: '周口', value: 55, }, { name: '南阳', value: 120, }, { name: '西峡', value: 78, }, { name: '驻马店', value: 66, }, { name: '新乡', value: 80, }, { name: '信阳', value: 45, }, { name: '漯河', value: 29, }, ], }, }, }, ], }, } /** * 大屏内容元素 */ export const datavDecorationData = { baseEl: { desc: '基础元素', items: [ { type: 'extend', name: '文本标签', alias: 'display-text', icon: require('@/assets/img/datav/icon-span.png'), x: 10, y: 10, height: 80, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { text: { content: '文本内容', fontSize: '18px', color: '#fff', fontWeight: 800, textAlign: 'center', }, isDiyStyle: false, diyStyle: '{"fontSize":"18px","color":"#fff","fontWeight":800}', }, }, }, { type: 'decoration', name: '本地时间', alias: 'localtime', icon: require('@/assets/img/datav/base-time.png'), x: 10, y: 10, height: 80, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { showYear: true, showWeek: true, showDay: true, formatYear: 'yyyy-MM-dd', formatDay: 'HH: mm: ss', text: { fontSize: '18px', color: '#fff', fontWeight: 800, textAlign: 'center', }, isDiyStyle: false, diyStyle: '{"fontSize":"18px","color":"#fff","fontWeight":800}', }, }, }, ], }, styleEl: { desc: '样式元素', items: [ { type: 'decoration', name: '样式一', alias: 'decoration1', icon: require('@/assets/img/datav/icon-decoration1.png'), x: 10, y: 10, height: 50, width: 200, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { color: ['white', 'green'], colorStr: "['white', 'green']", }, }, }, { type: 'decoration', name: '样式二', alias: 'decoration2', icon: require('@/assets/img/datav/icon-decoration2.png'), x: 10, y: 10, height: 50, width: 200, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { dur: 6, //单次动画时长(秒) reverse: false, //翻转 }, }, }, { type: 'decoration', name: '样式三', alias: 'decoration3', icon: require('@/assets/img/datav/icon-decoration3.png'), x: 10, y: 10, height: 30, width: 250, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 }, { type: 'decoration', name: '样式四', alias: 'decoration4', icon: require('@/assets/img/datav/icon-decoration4.png'), x: 10, y: 10, height: 150, width: 50, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { dur: 3, //单次动画时长(秒) reverse: false, //翻转 }, }, }, { type: 'decoration', name: '样式五', alias: 'decoration5', icon: require('@/assets/img/datav/icon-decoration5.png'), x: 10, y: 10, height: 40, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { dur: 1.2, //单次动画时长(秒) }, }, }, { type: 'decoration', name: '样式六', alias: 'decoration6', icon: require('@/assets/img/datav/icon-decoration6.png'), x: 10, y: 10, height: 30, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 }, { type: 'decoration', name: '样式七', alias: 'decoration7', icon: require('@/assets/img/datav/icon-decoration7.png'), x: 10, y: 10, height: 30, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: '', dbType: 'varchar'}, designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, config: { text: { content: '文本', color: '#409eff', fontWeight: 900, fontSize: '22px', //px formatter: '{c}', }, isDiyStyle: false, diyStyle: '{"fontSize":"22px","color":"#409eff","fontWeight":900}', }, }, }, { type: 'decoration', name: '样式八', alias: 'decoration8', icon: require('@/assets/img/datav/icon-decoration8.png'), x: 10, y: 10, height: 50, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { reverse: false, //翻转 }, }, }, { type: 'decoration', name: '样式九', alias: 'decoration9', icon: require('@/assets/img/datav/icon-decoration9.png'), x: 10, y: 10, height: 150, width: 150, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 dur: 3, //单次动画时长(秒) options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: '', dbType: 'varchar'}, designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, config: { dur: 3, //单次动画时长(秒) text: { content: '66%', color: '#409eff', fontWeight: 900, fontSize: '22px', //px formatter: '{c}', }, isDiyStyle: false, diyStyle: '{"fontSize":"22px","color":"#409eff","fontWeight":900}', }, }, }, { type: 'decoration', name: '样式十', alias: 'decoration10', icon: require('@/assets/img/datav/icon-decoration10.png'), x: 10, y: 10, height: 50, width: 500, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 }, { type: 'decoration', name: '样式十一', alias: 'decoration11', icon: require('@/assets/img/datav/icon-decoration11.png'), x: 10, y: 10, height: 60, width: 200, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { dataFrom: 'database', dataAlias: '', xField: {alias: '', desc: '', dbType: 'varchar'}, designApply: false, //设计时应用数据模型配置 refresh: { //定时刷新 on: false, rate: 5, rule: 'second', }, config: { dur: 3, //单次动画时长(秒) text: { content: '文本', color: '#409eff', fontWeight: 900, fontSize: '22px', //px formatter: '{c}', }, isDiyStyle: false, diyStyle: '{"fontSize":"22px","color":"#409eff","fontWeight":900}', }, }, }, { type: 'decoration', name: '样式十二', alias: 'decoration12', icon: require('@/assets/img/datav/icon-decoration12.png'), x: 10, y: 10, height: 150, width: 150, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { scanDur: 3, //扫描动画时长(秒) haloDur: 2, //光晕动画时长(秒) }, }, }, ], }, borderEl: { desc: '边框元素', items: [ { type: 'border', name: '边框一', alias: 'dv-border-box-1', icon: require('@/assets/img/datav/datav-border1.png'), x: 10, y: 10, height: 300, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { color: { //颜色设置 apply: false, //是否应用 first: '#ff0000', //主色 second: '#008000', //副色 background: '', //背景颜色 }, }, }, }, { type: 'border', name: '边框二', alias: 'dv-border-box-2', icon: require('@/assets/img/datav/datav-border2.png'), x: 10, y: 10, height: 300, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { color: { //颜色设置 apply: false, //是否应用 first: '#ff0000', //主色 second: '#008000', //副色 background: '', //背景颜色 }, }, }, }, { type: 'border', name: '边框三', alias: 'dv-border-box-3', icon: require('@/assets/img/datav/datav-border3.png'), x: 10, y: 10, height: 300, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { color: { //颜色设置 apply: false, //是否应用 first: '#ff0000', //主色 second: '#008000', //副色 background: '', //背景颜色 }, }, }, }, { type: 'border', name: '边框四', alias: 'dv-border-box-4', icon: require('@/assets/img/datav/datav-border4.png'), x: 10, y: 10, height: 300, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { color: { //颜色设置 apply: false, //是否应用 first: '#ff0000', //主色 second: '#008000', //副色 background: '', //背景颜色 }, reverse: false, }, }, }, { type: 'border', name: '边框五', alias: 'dv-border-box-5', icon: require('@/assets/img/datav/datav-border5.png'), x: 10, y: 10, height: 300, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { color: { //颜色设置 apply: false, //是否应用 first: '#ff0000', //主色 second: '#008000', //副色 background: '', //背景颜色 }, reverse: false, }, }, }, { type: 'border', name: '边框六', alias: 'dv-border-box-6', icon: require('@/assets/img/datav/datav-border6.png'), x: 10, y: 10, height: 300, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { color: { //颜色设置 apply: false, //是否应用 first: '#ff0000', //主色 second: '#008000', //副色 background: '', //背景颜色 }, }, }, }, { type: 'border', name: '边框七', alias: 'dv-border-box-7', icon: require('@/assets/img/datav/datav-border7.png'), x: 10, y: 10, height: 300, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { color: { //颜色设置 apply: false, //是否应用 first: '#ff0000', //主色 second: '#008000', //副色 background: '', //背景颜色 }, }, }, }, { type: 'border', name: '边框八', alias: 'dv-border-box-8', icon: require('@/assets/img/datav/datav-border8.png'), x: 10, y: 10, height: 300, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { color: { //颜色设置 apply: false, //是否应用 first: '#ff0000', //主色 second: '#008000', //副色 background: '', //背景颜色 }, dur: 3, reverse: false, }, }, }, { type: 'border', name: '边框九', alias: 'dv-border-box-9', icon: require('@/assets/img/datav/datav-border9.png'), x: 10, y: 10, height: 300, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { color: { //颜色设置 apply: false, //是否应用 first: '#ff0000', //主色 second: '#008000', //副色 background: '', //背景颜色 }, }, }, }, { type: 'border', name: '边框十', alias: 'dv-border-box-10', icon: require('@/assets/img/datav/datav-border10.png'), x: 10, y: 10, height: 300, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { color: { //颜色设置 apply: false, //是否应用 first: '#ff0000', //主色 second: '#008000', //副色 background: '', //背景颜色 }, }, }, }, { type: 'border', name: '边框十一', alias: 'dv-border-box-11', icon: require('@/assets/img/datav/datav-border11.png'), x: 10, y: 10, height: 300, width: 400, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { color: { //颜色设置 apply: false, //是否应用 first: '#ff0000', //主色 second: '#008000', //副色 background: '', //背景颜色 }, title: 'dv-border-box-11', titleWidth: 180, }, }, }, { type: 'border', name: '边框十二', alias: 'dv-border-box-12', icon: require('@/assets/img/datav/datav-border12.png'), x: 10, y: 10, height: 300, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { color: { //颜色设置 apply: false, //是否应用 first: '#ff0000', //主色 second: '#008000', //副色 background: '', //背景颜色 }, }, }, }, { type: 'border', name: '边框十三', alias: 'dv-border-box-13', icon: require('@/assets/img/datav/datav-border13.png'), x: 10, y: 10, height: 300, width: 300, zIndex: 1, state: 1, //关联元素key，处理数据变化时控件刷新 options: { config: { color: { //颜色设置 apply: false, //是否应用 first: '#ff0000', //主色 second: '#008000', //副色 background: '', //背景颜色 }, }, }, }, ], }, }