新增雷达图

qianming 2 years ago
parent 9a99557876
commit 81a85d4afe

@ -0,0 +1,6 @@
-- 新增雷达图字典
REPLACE INTO `aj_report`.`gaea_dict`(`dict_name`, `dict_code`, `remark`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('雷达属性', 'RADAR_PROPERTIES', '雷达属性', 'admin', NOW(), 'admin', NOW(), 1);
REPLACE INTO `aj_report`.`gaea_dict_item`(`dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('RADAR_PROPERTIES', '名称', 'name', NULL, 1, 'zh', NULL, NULL, 'admin', NOW(), 'admin', NOW(), 1);
REPLACE INTO `aj_report`.`gaea_dict_item`(`dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('RADAR_PROPERTIES', '雷达', 'radar', NULL, 1, 'zh', NULL, NULL, 'admin', NOW(), 'admin', NOW(), 1);

@ -111,6 +111,7 @@ export default {
// widget-stackchart 堆叠图 // widget-stackchart 堆叠图
// widget-heatmap 热力图 // widget-heatmap 热力图
// widget-mapline 中国地图-路线图 // widget-mapline 中国地图-路线图
// widget-radar 雷达图
const chartType = params.chartType const chartType = params.chartType
if ( if (
chartType == "widget-barchart" || chartType == "widget-barchart" ||
@ -131,6 +132,8 @@ export default {
return this.coordChartFn(params.chartProperties, data) return this.coordChartFn(params.chartProperties, data)
} else if (chartType == "widget-linemap") { } else if (chartType == "widget-linemap") {
return this.linemapChartFn(params.chartProperties, data) return this.linemapChartFn(params.chartProperties, data)
} else if (chartType == "widget-radar") {
return this.radarChartFn(params.chartProperties, data)
} else { } else {
return data return data
} }
@ -269,6 +272,25 @@ export default {
} }
return ananysicData; return ananysicData;
}, },
radarChartFn(chartProperties, data) {
const ananysicData = {};
// 字段名
const radarField = [];
let nameField;
for(const key in chartProperties) {
if (chartProperties[key] == 'radar') {
radarField.push(key)
}
if (chartProperties[key] == 'name') {
nameField = key;
}
}
// 拿到数值
ananysicData["name"] = nameField;
ananysicData["keys"] = radarField;
ananysicData["value"] = data;
return ananysicData;
},
setUnique(arr) { setUnique(arr) {
let newArr = []; let newArr = [];
arr.forEach(item => { arr.forEach(item => {

@ -0,0 +1,178 @@
<template>
<div>
<el-button
type="primary"
size="small"
icon="el-icon-plus"
plain
@click="handleAddClick"
>新增</el-button
>
<el-table :data="formData" style="width: 100%">
<el-table-column prop="name" label="名称" width="100" />
<el-table-column prop="key" label="key值" width="100" />
<el-table-column prop="max" label="最大值" width="100" />
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<div class="button-group">
<el-button
@click="handleEditorClick(scope.$index, scope.row)"
type="text"
size="small"
>编辑</el-button
>
<el-button
type="text"
size="small"
@click="handleDeleteClick(scope.$index, scope.row)"
>删除</el-button
>
</div>
</template>
</el-table-column>
</el-table>
<el-dialog
title="新增"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-form :model="rowFormData" label-width="60px">
<el-form-item label="名称:">
<el-input
v-model.trim="rowFormData['name']"
placeholder="请输入名称"
size="mini"
>
</el-input>
</el-form-item>
<el-form-item label="key值:">
<el-input
v-model.trim="rowFormData['key']"
placeholder="请输入key值"
size="mini"
>
</el-input>
</el-form-item>
<el-form-item label="最大值:">
<el-input
v-model.trim="rowFormData['max']"
placeholder="请输入最大值"
size="mini"
>
</el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogVisible = false"> </el-button>
<el-button size="mini" type="primary" @click="handleSaveClick"
> </el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
model: {
prop: "formData",
event: "input"
},
props: {
formData: Array
},
data() {
return {
dialogVisible: false,
rowFormData: {
name: "",
key: "",
max: ""
},
flag: true, // true false
indexEditor: -1, //
tableData: []
};
},
methods: {
//
handleAddClick() {
this.rowFormData = {};
this.flag = true;
this.dialogVisible = true;
},
//
handleEditorClick(index, row) {
this.flag = false;
this.rowFormData = this.deepClone(row);
this.indexEditor = index;
this.dialogVisible = true;
},
//
handleClose() {
this.dialogVisible = false;
},
//
handleSaveClick() {
if (this.flag) {
//
this.formData.push(this.rowFormData);
this.dialogVisible = false;
} else {
//
this.formData[this.indexEditor] = this.rowFormData;
this.$set(this.formData, this.indexEditor, this.rowFormData);
this.dialogVisible = false;
}
this.$emit("input", this.formData);
this.$emit("change", this.formData);
},
//
handleDeleteClick(index) {
this.formData.splice(index, 1);
this.$emit("input", this.formData);
this.$emit("change", this.formData);
}
}
};
</script>
<style lang="scss" scoped>
/deep/::-webkit-scrollbar-track-piece {
background-color: transparent;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 0; //
height: 8px; //
}
//
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(144, 146, 152, 0.3);
}
/deep/.el-table,
/deep/.el-table__expanded-cell,
/deep/.el-table th,
/deep/.el-table tr {
background-color: transparent !important;
color: #859094 !important;
font-size: 12px !important;
}
/deep/.el-table td,
/deep/.el-table th.is-leaf {
border-bottom: none;
line-height: 26px;
}
/deep/.el-table tbody tr:hover {
background-color: #263445 !important;
}
/deep/.el-table tbody tr:hover > td {
background-color: #263445 !important;
}
/deep/.el-table::before {
height: 0;
}
.button-group .el-button {
padding: 0;
}
</style>

@ -145,6 +145,11 @@
:chart-type="item.chartType" :chart-type="item.chartType"
@change="changed($event, item.name)" @change="changed($event, item.name)"
/> />
<dynamic-add-radar
v-if="item.type == 'dynamic-add-radar' && inputShow[item.name]"
v-model="formData[item.name]"
:chart-type="item.chartType"
@change="changed($event, item.name)"/>
</div> </div>
<div v-else-if="isShowForm(item, '[object Array]')" :key="'a-' + index"> <div v-else-if="isShowForm(item, '[object Array]')" :key="'a-' + index">
<el-collapse accordion> <el-collapse accordion>
@ -276,6 +281,7 @@ import dynamicComponents from "./dynamicComponents.vue";
import customColorComponents from "./customColorComponents"; import customColorComponents from "./customColorComponents";
import dynamicAddTable from "./dynamicAddTable.vue"; import dynamicAddTable from "./dynamicAddTable.vue";
import customUpload from "./customUpload.vue"; import customUpload from "./customUpload.vue";
import dynamicAddRadar from "./dynamicAddRadar";
export default { export default {
name: "DynamicForm", name: "DynamicForm",
components: { components: {
@ -284,7 +290,8 @@ export default {
dynamicComponents, dynamicComponents,
customColorComponents, customColorComponents,
dynamicAddTable, dynamicAddTable,
customUpload customUpload,
dynamicAddRadar
}, },
model: { model: {
prop: "value", prop: "value",

@ -0,0 +1,449 @@
/**
* @Author: foming
*/
export const widgetRadar = {
code: 'widget-radar',
type: 'html',
label: '雷达图',
icon: 'iconleidatu',
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-select',
label: '雷达样式',
name: 'radarShape',
required: false,
placeholder: '',
selectOptions: [
{code: 'line', name: '线型'},
{code: 'circle', name: '圆型'},
],
value: 'line'
},
{
type: 'el-input-number',
label: '均分数量',
name: 'splitNumber',
require: false,
placeholder: '',
value: 5,
},
{
type: 'el-switch',
label: '坐标轴显示',
name: 'axisLineShow',
required: false,
placeholder: '',
value: true
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'axisLineColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-slider',
label: '坐标轴透明度',
name: 'axisLineOpacity',
required: false,
placeholder: '',
value: 50
},
{
type: 'el-switch',
label: '分割线显示',
name: 'splitLineShow',
required: false,
placeholder: '',
value: true
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-slider',
label: '分割线透明度',
name: 'splitLineOpacity',
required: false,
placeholder: '',
value: 50
},
],
},
{
name: '顶点设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'axisNameShow',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-number',
label: '名称大小',
name: 'axisNameFontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'axisNameColor',
required: false,
placeholder: '',
value: '#87cefa',
},
{
type: 'el-select',
label: '字体粗细',
name: 'axisNamFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-select',
label: '字体风格',
name: 'axisNamFontStyle',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'italic', name: 'italic斜体'},
{code: 'oblique', name: 'oblique斜体'},
],
value: 'normal'
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '图例显示',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '图例名称',
name: 'legendName',
required: false,
placeholder: '多值以' | '隔开',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'legendColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体字号',
name: 'legendFontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'legendWidth',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 10
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '点大小',
name: 'symbolSize',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-select',
label: '线型效果',
name: 'lineType',
required: false,
placeholder: '',
selectOptions: [
{code: 'solid', name: '实线'},
{code: 'dashed', name: '线型虚线'},
{code: 'dotted', name: '点型虚线'},
],
value: 'solid'
},
{
type: 'el-slider',
label: '透明度',
name: 'opacity',
required: false,
placeholder: '',
value: 50
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: 'rgba(0, 206, 209, 1)'
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
},
],
},
],
{
type: 'dynamic-add-radar',
label: '',
name: 'dynamicAddRadar',
required: false,
placeholder: '',
value: [
{name: 'SA', key: 'Sales', max: 6500},
{name: 'Admin', key: 'Admin', max: 16000},
{name: 'Information', key: 'Information', max: 30000},
{name: 'Customer', key: 'Customer', max: 38000},
{name: 'Develop', key: 'Develop', max: 52000},
]
}
],
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: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{name: '2016', Sales: 4200, Admin: 3000, Information: 20000, Customer: 35000, Develop: 50000},
{name: '2017', Sales: 5000, Admin: 14000, Information: 28000, Customer: 26000, Develop: 42000},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-radar',
dictKey: 'RADAR_PROPERTIES',
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: 400,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 300,
},
]
}
}

@ -262,7 +262,7 @@ export const widgetTable = {
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData', relactiveDomValue: 'dynamicData',
chartType: 'widget-table', chartType: 'widget-table',
dictKey: 'TEXT_PROPERTIES', //表格的暂不起作用 dictKey: 'TEXT_PROPERTIES',
value: '', value: '',
}, },
], ],

@ -36,6 +36,7 @@ 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"; import {widgetWordCloud} from "./configure/widget-word-cloud";
import {widgetHeatmap} from "./configure/widget-heatmap"; import {widgetHeatmap} from "./configure/widget-heatmap";
import {widgetRadar} from "./configure/widget-radar";
export const widgetTool = [ export const widgetTool = [
// type=html类型的组件 // type=html类型的组件
@ -67,5 +68,6 @@ export const widgetTool = [
widgetDecoratePie, widgetDecoratePie,
widgetMoreBarLine, widgetMoreBarLine,
widgetWordCloud, widgetWordCloud,
widgetHeatmap widgetHeatmap,
widgetRadar
] ]

@ -0,0 +1,371 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
import vue from "vue";
import VueSuperSlide from "vue-superslide";
vue.use(VueSuperSlide);
export default {
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
hackReset: true,
options: {
title: {},
legend: {},
radar: {
indicator: []
},
series: []
},
optionsSetup: {},
optionsPosition: {},
optionsData: {}
};
},
computed: {
styleObj() {
const allStyle = this.optionsPosition;
return {
position: this.ispreview ? "absolute" : "static",
width: allStyle.width + "px",
height: allStyle.height + "px",
left: allStyle.left + "px",
top: allStyle.top + "px",
background: this.optionsSetup.background
};
},
},
watch: {
value: {
handler(val) {
this.optionsSetup = val.setup;
this.optionsPosition = val.position;
this.optionsData = val.data;
this.editorOptions();
},
deep: true
}
},
mounted() {
this.optionsSetup = this.value.setup;
this.optionsPosition = this.value.position;
this.optionsData = this.value.data;
this.editorOptions();
},
methods: {
editorOptions() {
this.setOptionIndicator();
this.setOptionsRadar();
this.setOptionsLegend();
this.setOptionsTooltip();
this.setOptionsMargin();
this.setOptionsData();
},
//
setOptionIndicator() {
const optionsSetup = this.optionsSetup;
const indicator = optionsSetup.dynamicAddRadar;
this.options.radar.indicator = indicator;
},
//
setOptionsRadar() {
const optionsSetup = this.optionsSetup;
const axisLine = {
show: optionsSetup.axisLineShow,
lineStyle: {
color: optionsSetup.axisLineColor,
opacity: optionsSetup.axisLineOpacity / 100,
}
};
const axisName = {
show: optionsSetup.axisNameShow,
color: optionsSetup.axisNameColor,
fontSize: optionsSetup.axisNameFontSize,
fontStyle: optionsSetup.axisNamFontStyle,
fontWeight: optionsSetup.axisNamFontWeight,
}
const splitLine = {
show: optionsSetup.splitLineShow,
lineStyle: {
color: optionsSetup.splitLineColor,
opacity: optionsSetup.splitLineOpacity / 100,
}
}
this.options.radar.axisLine = axisLine;
// echarts5.XnameaxisName
this.options.radar.name = axisName;
this.options.radar.splitLine = splitLine;
this.options.radar.shape = optionsSetup.radarShape;
this.options.radar.splitNumber = optionsSetup.splitNumber;
},
//
setOptionsLegend() {
const optionsSetup = this.optionsSetup;
const legend = {
show: optionsSetup.isShowLegend,
left: optionsSetup.lateralPosition,
top: optionsSetup.longitudinalPosition,
bottom: optionsSetup.longitudinalPosition,
orient: optionsSetup.layoutFront,
textStyle: {
color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize,
},
itemWidth: optionsSetup.legendWidth,
}
this.options.legend = legend;
},
//
setOptionsLegendName(name) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const legendName = optionsSetup.legendName;
//
if (null == legendName || legendName == '') {
for (let i = 0; i < name.length; i++) {
series[0].data[i].name = name[i];
}
this.options.legend['data'] = name;
} else {
const arr = legendName.split('|');
for (let i = 0; i < arr.length; i++) {
series[0].data[i].name = arr[i];
}
this.options.legend['data'] = arr;
}
},
// tooltip
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.tipsFontSize,
}
};
this.options.tooltip = tooltip;
},
//
setOptionsMargin() {
this.options.radar.radius = '70%';
},
setOptionsData() {
const optionsData = this.optionsData; // or
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
//
setUnique(arr) {
let newArr = [];
arr.forEach(item => {
return newArr.includes(item) ? '' : newArr.push(item);
});
return newArr;
},
staticDataFn(val) {
const optionsSetup = this.optionsSetup;
//
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
this.options.color = arrColor;
const indicator = optionsSetup.dynamicAddRadar;
// key
const radarKeys = [];
for (const i in indicator) {
radarKeys[i] = indicator[i].key;
}
const name = [];
const data = [];
const legendName = [];
for (const i in val) {
name[i] = val[i].name;
}
for (const i in name) {
const values = new Array(radarKeys.length).fill(0);
for (const j in radarKeys) {
for (const k in val) {
if (val[k].name == name[i]) {
values[j] = val[k][radarKeys[j]];
}
}
}
data.push({
name: name[i],
value: values,
label: {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight,
},
lineStyle: {
normal: {
type: optionsSetup.lineType,
color: arrColor[i],
},
},
});
legendName.push(name[i]);
}
this.options.series[0] = {
type: 'radar',
data: data,
symbolSize: optionsSetup.symbolSize,
areaStyle: {
normal: {
opacity: optionsSetup.opacity / 100,
}
},
};
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
},
dynamicDataFn(data, refreshTime) {
if (!data) return;
if (this.ispreview) {
this.getEchartData(data);
this.flagInter = setInterval(() => {
this.getEchartData(data);
}, refreshTime);
} else {
this.getEchartData(data);
}
},
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
this.renderingFn(res);
});
},
renderingFn(val) {
const optionsSetup = this.optionsSetup;
//
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
this.options.color = arrColor;
const indicator = optionsSetup.dynamicAddRadar;
// key
const radarKeys = [];
for (const i in indicator) {
radarKeys[i] = indicator[i].key;
}
const name = [];
const data = [];
const legendName = [];
for (const i in val.value) {
name.push(val.value[i][val.name]);
}
for (const i in name) {
const values = new Array(radarKeys.length).fill(0);
for (const j in radarKeys) {
for (const k in val.value) {
if (val.value[k][val.name] == name[i]) {
values[j] = val.value[k][radarKeys[j]];
}
}
}
data.push({
name: name[i],
value: values,
label: {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight,
},
lineStyle: {
normal: {
type: optionsSetup.lineType,
color: arrColor[i],
},
},
});
legendName.push(name[i]);
}
this.options.series[0] = {
type: 'radar',
data: data,
symbolSize: optionsSetup.symbolSize,
areaStyle: {
normal: {
opacity: optionsSetup.opacity / 100,
}
},
};
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
}
}
};
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
/* 本例子css */
.txtScroll-top {
overflow: hidden;
position: relative;
}
.title {
display: flex;
flex-direction: row;
width: 100%;
}
.title > div {
height: 50px;
line-height: 50px;
width: 100%;
}
.txtScroll-top .bd {
width: 100%;
}
.txtScroll-top .infoList li {
height: 50px;
line-height: 50px;
display: flex;
flex-direction: row;
}
.txtScroll-top .infoList li > div {
width: 100%;
}
/*.txtScroll-top .infoList li:nth-child(n) {
background: rgb(0, 59, 81);
}
.txtScroll-top .infoList li:nth-child(2n) {
background: rgb(10, 39, 50);
}*/
</style>

@ -39,6 +39,7 @@ import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart"; import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart";
import widgetWordCloud from "./wordcloud/widgetWordCloud"; import widgetWordCloud from "./wordcloud/widgetWordCloud";
import widgetHeatmap from "./heatmap/widgetHeatmap"; import widgetHeatmap from "./heatmap/widgetHeatmap";
import widgetRadar from "./radar/widgetRadar";
export default { export default {
name: "WidgetTemp", name: "WidgetTemp",
@ -70,7 +71,8 @@ export default {
widgetDecoratePieChart, widgetDecoratePieChart,
widgetMoreBarLineChart, widgetMoreBarLineChart,
widgetWordCloud, widgetWordCloud,
widgetHeatmap widgetHeatmap,
widgetRadar
}, },
model: { model: {
prop: "value", prop: "value",

@ -50,6 +50,7 @@ import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart"; import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart";
import widgetWordCloud from "./wordcloud/widgetWordCloud"; import widgetWordCloud from "./wordcloud/widgetWordCloud";
import widgetHeatmap from "./heatmap/widgetHeatmap"; import widgetHeatmap from "./heatmap/widgetHeatmap";
import widgetRadar from "./radar/widgetRadar";
export default { export default {
name: "Widget", name: "Widget",
@ -81,7 +82,8 @@ export default {
widgetDecoratePieChart, widgetDecoratePieChart,
widgetMoreBarLineChart, widgetMoreBarLineChart,
widgetWordCloud, widgetWordCloud,
widgetHeatmap widgetHeatmap,
widgetRadar
}, },
model: { model: {
prop: "value", prop: "value",

Loading…
Cancel
Save