Merge remote-tracking branch 'origin/dev' into dev

Raod 3 years ago
commit ae28acd897

@ -1,6 +1,6 @@
## 图表和数据集之间的关系 ## 图表和数据集之间的关系
图表和数据集是强关联关系一个图表需要什么样的数据才能进行展示下面都有说明以柱状图举例只能用俩个字段的数据集进行数据展示那使用数据集有2个以上字段那肯定图表无法正常展示反之有个数据集是3个字段那就找能展示3个字段的图表千万别搞小聪明定了好多个字段的数据集然后从里面挑几个字段进行展示不要么干。<br> 图表和数据集是强关联关系一个图表需要什么样的数据才能进行展示下面都有说明以柱状图举例只能用俩个字段的数据集进行数据展示那使用数据集有2个以上字段那肯定图表无法正常展示反之有个数据集是3个字段那就找能展示3个字段的图表千万别搞小聪明定了好多个字段的数据集然后从里面挑几个字段进行展示不要么干。<br>
## 文本框 ## 文本框
@ -42,7 +42,7 @@
![img](../picture/dashboard/img_22.png) <br> ![img](../picture/dashboard/img_22.png) <br>
表格字段对应的数据只选择“文本数字”。<br> 表格字段对应的数据只选择“文本数字”。<br>
![img14](../picture/dashboard/img_23.png) <br> ![img14](../picture/dashboard/img_23.png) <br>
**注意:** 多个字段的时候,需要在“配置-新增”添加你选择数据集所对应的字段,类似于映射关系。 <br> **注意:** 多个字段的时候,需要在“配置-新增”添加你选择数据集所对应的字段,即“配置”中“表体设置”的“key值”要和你“动态数据对应的字段名”保持一致类似于映射关系。 <br>
**如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>** **如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
## 内联框架 ## 内联框架
@ -52,6 +52,7 @@
## 柱状图 ## 柱状图
柱状图数据集对应字典值需要选择一个“X轴”、“柱状”只需要2个字段 <br> 柱状图数据集对应字典值需要选择一个“X轴”、“柱状”只需要2个字段 <br>
![img_13](../picture/charts/img_13.png) <br>
**如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>** **如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式 ### 数据格式
@ -65,7 +66,7 @@
## 折线图 ## 折线图
折线图数据集对应字典值需要选择一个“X轴”、“折线”只需要2个字段 <br> 折线图数据集对应字典值需要选择一个“X轴”、“折线”只需要2个字段 <br>
![img_8.png](../picture/dashboard/img_8.png) <br> ![img14.png](../picture/charts/img_14.png) <br>
**如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>** **如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式 ### 数据格式
@ -74,14 +75,24 @@
## 柱线图 ## 柱线图
柱线图数据集对应字典值需要选择一个“X轴”、“柱状”、“折线”需要3个字段 <br> 柱线图数据集对应字典值需要选择一个“X轴”、“柱状”、“折线”需要3个字段,图例名称用 | 进行分隔。<br>
![img9](../picture/dashboard/img_9.png) <br> ![img15](../picture/charts/img_15.png) <br>
**如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>** **如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式 ### 数据格式
![img5](../picture/charts/img_4.png) <br> ![img5](../picture/charts/img_4.png) <br>
## 多柱线图
多柱线图对应数据字典需要选择一个“X轴”剩下的字段可任意选择为“柱状”、“折线”图例名称用 | 进行分隔。<br>
![img16](../picture/charts/img_16.png) <br>
**如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式
![img17](../picture/charts/img_17.png) <br>
## 饼图 ## 饼图
饼图的数据集选择的时候只能选择饼图对应的字典即“Name”、“Value”不明白可以参考静态数据 <br> 饼图的数据集选择的时候只能选择饼图对应的字典即“Name”、“Value”不明白可以参考静态数据 <br>
@ -95,7 +106,7 @@
## 漏斗图 ## 漏斗图
![img13](../picture/dashboard/img_13.png) <br> ![img18](../picture/charts/img_18.png) <br>
**如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>** **如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式 ### 数据格式
@ -127,7 +138,7 @@
## 百分百图 ## 百分百图
![img16](../picture/dashboard/img_16.png) <br> ![img19](../picture/charts/img_19.png) <br>
**如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>** **如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 数据格式 ### 数据格式
@ -185,4 +196,13 @@
## 装饰饼图 ## 装饰饼图
装饰用,可单独使用或者配合文本框等图表组件来使整个大屏立体、丰满。<br> 装饰用,可单独使用或者配合文本框等图表组件来使整个大屏立体、丰满。<br>
![img12](../picture/charts/img_12.png) <br> ![img12](../picture/charts/img_12.png) <br>
## 词云图
最大最小角度都为0时则文字显示为正。所有词云颜色皆是随机产生动态数据每请求一次数据所有词云颜色皆改变一次。<br>
![img20](../picture/charts/img_20.png) <br>
### 数据格式
和饼图、南丁格尔玫瑰图数据保持一致。<br>

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

@ -54,6 +54,12 @@
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe7af;</span>
<div class="name">词云图</div>
<div class="code-name">&amp;#xe7af;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe618;</span> <span class="icon iconfont">&#xe618;</span>
<div class="name">导出</div> <div class="name">导出</div>
@ -786,9 +792,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1629797734566') format('woff2'), src: url('iconfont.woff2?t=1643094287456') format('woff2'),
url('iconfont.woff?t=1629797734566') format('woff'), url('iconfont.woff?t=1643094287456') format('woff'),
url('iconfont.ttf?t=1629797734566') format('truetype'); url('iconfont.ttf?t=1643094287456') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
@ -814,6 +820,15 @@
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont iconciyuntu"></span>
<div class="name">
词云图
</div>
<div class="code-name">.iconciyuntu
</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icondaochu"></span> <span class="icon iconfont icondaochu"></span>
<div class="name"> <div class="name">
@ -1912,6 +1927,14 @@
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconciyuntu"></use>
</svg>
<div class="name">词云图</div>
<div class="code-name">#iconciyuntu</div>
</li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondaochu"></use> <use xlink:href="#icondaochu"></use>

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 1513211 */ font-family: "iconfont"; /* Project id 1513211 */
src: url("iconfont.woff2?t=1629797734566") format("woff2"), src: url('iconfont.woff2?t=1643094287456') format('woff2'),
url("iconfont.woff?t=1629797734566") format("woff"), url('iconfont.woff?t=1643094287456') format('woff'),
url("iconfont.ttf?t=1629797734566") format("truetype"); url('iconfont.ttf?t=1643094287456') format('truetype');
} }
.iconfont { .iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.iconciyuntu:before {
content: "\e7af";
}
.icondaochu:before { .icondaochu:before {
content: "\e618"; content: "\e618";
} }
@ -488,3 +492,4 @@
.iconjiantou-copy-copy:before { .iconjiantou-copy-copy:before {
content: "\e654"; content: "\e654";
} }

File diff suppressed because one or more lines are too long

@ -5,6 +5,13 @@
"css_prefix_text": "icon", "css_prefix_text": "icon",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "23043843",
"name": "词云图",
"font_class": "ciyuntu",
"unicode": "e7af",
"unicode_decimal": 59311
},
{ {
"icon_id": "14325372", "icon_id": "14325372",
"name": "导出", "name": "导出",

@ -1,12 +1,12 @@
/* /*
* @Descripttion: 南丁格尔玫瑰图 json * @Descripttion: 南丁格尔玫瑰图 json
* @version: * @version:
* @Author: qianlishi * @Author: qianlishi
* @Date: 2021-08-29 07:32:40 * @Date: 2021-08-29 07:32:40
* @LastEditors: qianlishi * @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:18:05 * @LastEditTime: 2021-09-28 14:18:05
*/ */
export const WidgetPieNightingale = { export const widgetPieNightingale = {
code: 'WidgetPieNightingaleRoseArea', code: 'WidgetPieNightingaleRoseArea',
type: 'chart', type: 'chart',
label: '南丁格尔玫瑰图', label: '南丁格尔玫瑰图',
@ -400,4 +400,4 @@ export const WidgetPieNightingale = {
}, },
], ],
} }
} }

@ -0,0 +1,416 @@
export const widgetWordCloud = {
code: 'widgetWordCloud',
type: 'chart',
label: '词云图',
icon: 'iconciyuntu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '词云图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 12
},
],
},
{
name: '词云范围',
list: [
{
type: 'el-input-number',
label: '最大范围',
name: 'maxRangeSize',
required: false,
placeholder: '',
value: 25
},
{
type: 'el-input-number',
label: '最小范围',
name: 'minRangeSize',
required: false,
placeholder: '',
value: 2
},
],
},
{
name: '词云角度',
list: [
{
type: 'el-input-number',
label: '最大角度',
name: 'maxRotationRange',
required: false,
placeholder: '',
value: 90
},
{
type: 'el-input-number',
label: '最小角度',
name: 'minRotationRange',
required: false,
placeholder: '',
value: -45
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 12
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: '#00FEFF'
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 60000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{name: "占道", value: 284},
{name: "水质", value: 71},
{name: "无水", value: 71},
{name: "停供", value: 21},
{name: "停气", value: 11},
{name: "占道", value: 11},
{name: "Nancy", value: 520},
{name: "Jayfee", value: 666},
{name: "生活资源", value: 999},
{name: "供热管理", value: 888},
{name: "供气质量", value: 777},
{name: "社会保障", value: 407},
{name: "交通运输", value: 516},
{name: "城市交通", value: 515},
{name: "环境保护", value: 483},
{name: "城乡建设", value: 449},
{name: "公共安全", value: 406},
{name: "供热管理", value: 375},
{name: "市容环卫", value: 355},
{name: "粉尘污染", value: 335},
{name: "噪声污染", value: 324},
{name: "医疗卫生", value: 284},
{name: "供热发展", value: 254},
{name: "房地产管理", value: 462},
{name: "生活噪音", value: 253},
{name: "城市供电", value: 223},
{name: "大气污染", value: 223},
{name: "房屋安全", value: 223},
{name: "文化活动", value: 223},
{name: "拆迁管理", value: 223},
{name: "公共设施", value: 223},
{name: "供气质量", value: 223},
{name: "供电管理", value: 223},
{name: "燃气管理", value: 152},
{name: "教育管理", value: 152},
{name: "医疗纠纷", value: 152},
{name: "执法监督", value: 152},
{name: "设备安全", value: 152},
{name: "政务建设", value: 152},
{name: "宏观经济", value: 152},
{name: "教育管理", value: 112},
{name: "社会保障", value: 112},
{name: "分类列表", value: 112},
{name: "农业生产", value: 112},
{name: "物业服务", value: 92},
{name: "物业管理", value: 92},
{name: "低保管理", value: 92},
{name: "执法争议", value: 72},
{name: "占道堆放", value: 71},
{name: "地上设施", value: 71},
{name: "主网原因", value: 71},
{name: "集中供热", value: 71},
{name: "客运管理", value: 71},
{name: "治安案件", value: 71},
{name: "群众健身", value: 41},
{name: "市场收费", value: 41},
{name: "生产资金", value: 41},
{name: "生产噪声", value: 41},
{name: "农村低保", value: 41},
{name: "劳动争议", value: 41},
{name: "医疗事故", value: 21},
{name: "基础教育", value: 21},
{name: "职业教育", value: 21},
{name: "拆迁补偿", value: 21},
{name: "设施维护", value: 21},
{name: "市场外溢", value: 11},
{name: "占道经营", value: 11},
{name: "树木管理", value: 11},
{name: "供气质量", value: 11},
{name: "燃气管理", value: 11},
{name: "市容环卫", value: 11},
{name: "新闻传媒", value: 11},
{name: "人才招聘", value: 11},
{name: "市场环境", value: 11},
{name: "城市交通", value: 11},
{name: "物业服务", value: 11},
{name: "物业管理", value: 11},
{name: "园林绿化", value: 11},
{name: "有线电视", value: 11},
{name: "社会治安", value: 11},
{name: "林业资源", value: 11},
{name: "体育活动", value: 11},
{name: "低保管理", value: 11},
{name: "劳动争议", value: 11},
{name: "粉煤灰污染", value: 284},
{name: "人行道管理", value: 71},
{name: "身份证管理", value: 71},
{name: "房地产开发", value: 11},
{name: "经营性收费", value: 11},
{name: "一次供水问题", value: 11},
{name: "工业粉尘污染", value: 71},
{name: "工业排放污染", value: 41},
{name: "破坏森林资源", value: 41},
{name: "生活用水管理", value: 688},
{name: "一次供水问题", value: 588},
{name: "公交运输管理", value: 386},
{name: "自然资源管理", value: 355},
{name: "土地资源管理", value: 304},
{name: "生活用水管理", value: 112},
{name: "供热单位影响", value: 253},
{name: "二次供水问题", value: 112},
{name: "城市公共设施", value: 92},
{name: "拆迁政策咨询", value: 92},
{name: "县区、开发区", value: 152},
{name: "文娱市场管理", value: 72},
{name: "商业烟尘污染", value: 72},
{name: "供热单位影响", value: 71},
{name: "压力容器安全", value: 71},
{name: "劳动合同争议", value: 41},
{name: "物业资质管理", value: 21},
{name: "农村基础设施", value: 11},
{name: "行政事业收费", value: 11},
{name: "房屋配套问题", value: 11},
{name: "公交运输管理", value: 11},
{name: "社会福利及事务", value: 11},
{name: "食品安全与卫生", value: 11},
{name: "物业服务与管理", value: 112},
{name: "文体与教育管理", value: 406},
{name: "社会保障与福利", value: 429},
{name: "出租车运营管理", value: 385},
{name: "物业服务与管理", value: 304},
{name: "房屋质量与安全", value: 223},
{name: "劳动报酬与福利", value: 41},
{name: "食品安全与卫生", value: 11},
{name: "房屋与图纸不符", value: 11},
{name: "其他行政事业收费", value: 11},
{name: "农村土地规划管理", value: 254},
{name: "社会保障保险管理", value: 92},
{name: "城市交通秩序管理", value: 72},
{name: "户籍管理及身份证", value: 11},
{name: "公路(水路)交通", value: 11},
{name: "国有公交(大巴)管理", value: 71},
{name: "有线电视安装及调试维护", value: 11},
{name: "市政府工作部门(含部门管理机构、直属单位)", value: 11},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
dictKey: 'PIE_PROPERTIES',
relactiveDomValue: 'dynamicData',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 500,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 300,
},
],
}
}

@ -25,7 +25,7 @@ import {widgetPiechart} from "./configure/widget-piechart"
import {widgetFunnel} from "./configure/widget-funnel" import {widgetFunnel} from "./configure/widget-funnel"
import {widgetGauge} from "./configure/widget-gauge" import {widgetGauge} from "./configure/widget-gauge"
import {widgetMap} from "./configure/widget-map" import {widgetMap} from "./configure/widget-map"
import {WidgetPieNightingale} from "./configure/widget-pie-nightingale" import {widgetPieNightingale} from "./configure/widget-pie-nightingale"
import {widgetPiePercentage} from "./configure/widget-pie-percentage" import {widgetPiePercentage} from "./configure/widget-pie-percentage"
import {widgetAirbubbleMap} from "./configure/widget-airbubble-map" import {widgetAirbubbleMap} from "./configure/widget-airbubble-map"
import {widgetBarStack} from "./configure/widget-bar-stack" import {widgetBarStack} from "./configure/widget-bar-stack"
@ -34,6 +34,7 @@ import {widgetBarCompare} from "./configure/widget-bar-compare"
import {widgetLineCompare} from "./configure/widget-line-compare" import {widgetLineCompare} from "./configure/widget-line-compare"
import {widgetDecoratePie} from "./configure/widget-decorate-pie"; import {widgetDecoratePie} from "./configure/widget-decorate-pie";
import {widgetMoreBarLine} from "./configure/widget-more-bar-line"; import {widgetMoreBarLine} from "./configure/widget-more-bar-line";
import {widgetWordCloud} from "./configure/widget-word-cloud";
export const widgetTool = [ export const widgetTool = [
// type=html类型的组件 // type=html类型的组件
@ -55,7 +56,7 @@ export const widgetTool = [
widgetFunnel, widgetFunnel,
widgetGauge, widgetGauge,
widgetMap, widgetMap,
WidgetPieNightingale, widgetPieNightingale,
widgetPiePercentage, widgetPiePercentage,
widgetAirbubbleMap, widgetAirbubbleMap,
widgetBarStack, widgetBarStack,
@ -63,5 +64,6 @@ export const widgetTool = [
widgetBarCompare, widgetBarCompare,
widgetLineCompare, widgetLineCompare,
widgetDecoratePie, widgetDecoratePie,
widgetMoreBarLine widgetMoreBarLine,
widgetWordCloud
] ]

@ -37,6 +37,7 @@ import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart"; import widgetLineCompareChart from "./line/widgetLineCompareChart";
import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart"; import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart"; import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart";
import widgetWordCloud from "./wordcloud/widgetWordCloud";
export default { export default {
name: "WidgetTemp", name: "WidgetTemp",
@ -66,7 +67,8 @@ export default {
widgetBarCompareChart, widgetBarCompareChart,
widgetLineCompareChart, widgetLineCompareChart,
widgetDecoratePieChart, widgetDecoratePieChart,
widgetMoreBarLineChart widgetMoreBarLineChart,
widgetWordCloud
}, },
model: { model: {
prop: "value", prop: "value",

@ -48,6 +48,7 @@ import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart"; import widgetLineCompareChart from "./line/widgetLineCompareChart";
import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart"; import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart"; import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart";
import widgetWordCloud from "./wordcloud/widgetWordCloud";
export default { export default {
name: "Widget", name: "Widget",
@ -77,7 +78,8 @@ export default {
widgetBarCompareChart, widgetBarCompareChart,
widgetLineCompareChart, widgetLineCompareChart,
widgetDecoratePieChart, widgetDecoratePieChart,
widgetMoreBarLineChart widgetMoreBarLineChart,
widgetWordCloud
}, },
model: { model: {
prop: "value", prop: "value",

@ -0,0 +1,183 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
import wordCloud from "../../../../../../static/wordCloud/echarts-wordcloud.min.js";
export default {
name: "widgetWordCloud",
components: {},
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
options: {
tooltip: {
show: true
},
series: [
{
type: 'wordCloud',
size: ['9%', '99%'],
sizeRange: [6, 30],
textRotation: [0, 45, 90, -45],
rotationRange: [-45, 90],
shape: 'circle',
textPadding: 0,
autoSize: {
enable: true,
minSize: 6
},
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
},
data: []
}
]
},
optionsStyle: {}, //
optionsData: {}, //
optionsSetup: {},
flagInter: null
};
},
computed: {
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.background
};
}
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.setup;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true
}
},
mounted() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
},
methods: {
// options
editorOptions() {
this.setOptionsTitle();
this.setOptionsSizeRange();
this.setOptionsRotationRange();
this.setOptionsTooltip();
this.setOptionsData();
},
//
setOptionsTitle() {
const optionsSetup = this.optionsSetup;
const title = {};
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
};
this.options.title = title;
},
//
setOptionsSizeRange() {
const optionsSetup = this.optionsSetup;
this.options.series[0].sizeRange = [optionsSetup.minRangeSize, optionsSetup.maxRangeSize];
},
//
setOptionsRotationRange() {
const optionsSetup = this.optionsSetup;
this.options.series[0].rotationRange = [optionsSetup.minRotationRange, optionsSetup.maxRotationRange];
},
// tooltip
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.fontSize
}
};
this.options.tooltip = tooltip;
},
//
setOptionsData() {
const optionsData = this.optionsData; // or
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
const staticData = typeof val == "string" ? JSON.parse(val) : val;
for (const key in this.options.series) {
this.options.series[key].data = staticData;
}
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
}, refreshTime);
} else {
this.getEchartData(val);
}
},
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
this.renderingFn(res);
});
},
renderingFn(val) {
for (const key in this.options.series) {
this.options.series[key].data = val;
}
}
}
};
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>

@ -1,7 +1,10 @@
<template> <template>
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-scrollbar wrap-class="scrollbar-wrapper">
<div class="admin-title" @click="goBigScreen"> <div class="admin-title" @click="goBigScreen">
<img src="../../../../../static/logo-dp.png" width="50" class="mt10" /> <div class="con">
<img src="../../../../../static/logo-dp.png" width="50" />
<span class="version">V0.9.6</span>
</div>
</div> </div>
<el-menu <el-menu
:show-timeout="200" :show-timeout="200"
@ -16,7 +19,6 @@
:base-path="route.path" :base-path="route.path"
/> />
</el-menu> </el-menu>
<div class="version">V0.9.5</div>
</el-scrollbar> </el-scrollbar>
</template> </template>
@ -48,23 +50,30 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.admin-title { .admin-title {
height: 60px; // height: 60px;
line-height: 60px; // line-height: 60px;
text-align: center; text-align: center;
width: 100%; width: 100%;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
font-size: 14px; font-size: 14px;
background: #fff; background: #fff;
.con {
margin: auto;
img {
margin-top: 10px;
}
.version {
display: inline-block;
font-size: 12px;
color: #fff;
background: #4FADFD;
padding: 2px;
border-radius: 10px;
}
}
} }
.admin-title:hover { .admin-title:hover {
cursor: pointer; cursor: pointer;
} }
.version {
color: #999;
position: absolute;
bottom: 10px;
font-size: 16px;
margin-left: 10px;
}
</style> </style>

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save