ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增装饰饼图初始版

Browse Source
qianming 3 years ago
parent b296b45635
commit f9679b475c
6 changed files with 772 additions and 29 deletions
Show Stats Download Patch File Download Diff File

339
report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js
Unescape Escape View File

@ -0,0 +1,339 @@
/*
* @Descripttion: 装饰饼图
* @version:
* @Author: foming
* @Date:
* @LastEditors:
* @LastEditTime:
*/
export const widgetDecoratePie = {
code: 'widgetDecoratePieChart',
type: 'chart',
label: '装饰饼图',
icon: 'iconicon_tubiao_bingtu',
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-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '数值',
name: 'numberValue',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '百分比',
name: 'percentage',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 12
},
{
type: 'vue-color',
label: '网格线颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: ''
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-text',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: ''
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: ''
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: ''
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}],
},
],
},
],
],
// 坐标
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,
},
],
}
}

54
report-ui/src/views/report/bigscreen/designer/tools/main.js
Unescape Escape View File

@ -7,31 +7,32 @@
* @LastEditTime: 2021-09-28 13:33:47
*/
import { widgetText } from "./echartsConfigJson/widget-text"
import { widgetMarquee } from "./echartsConfigJson/widget-marquee"
import { widgetHref } from "./echartsConfigJson/widget-href"
import { widgetTime } from "./echartsConfigJson/widget-time"
import { widgetImage } from "./echartsConfigJson/widget-image"
import { widgetSliders } from "./echartsConfigJson/widget-slider"
import { widgetVideo } from "./echartsConfigJson/widget-video"
import { widgetTable } from "./echartsConfigJson/widget-table"
import { widgetIframe } from "./echartsConfigJson/widget-iframe"
import { widgetUniversal } from "./echartsConfigJson/widget-universal"
import { widgetBarchart } from "./echartsConfigJson/widget-barchart"
import { widgetGradientBarchart } from "./echartsConfigJson/widget-gradient-barchart"
import { widgetLinechart } from "./echartsConfigJson/widget-linechart"
import { widgetBarlinechart } from "./echartsConfigJson/widget-barlinechart"
import { widgetPiechart } from "./echartsConfigJson/widget-piechart"
import { widgetFunnel } from "./echartsConfigJson/widget-funnel"
import { widgetGauge } from "./echartsConfigJson/widget-gauge"
import { widgetMap } from "./echartsConfigJson/widget-map"
import { WidgetPieNightingale } from "./echartsConfigJson/widget-pie-nightingale"
import { widgetPiePercentage } from "./echartsConfigJson/widget-pie-percentage"
import { widgetAirbubbleMap } from "./echartsConfigJson/widget-airbubble-map"
import { widgetBarStack } from "./echartsConfigJson/widget-bar-stack"
import { widgetLineStack } from "./echartsConfigJson/widget-line-stack"
import { widgetBarCompare } from "./echartsConfigJson/widget-bar-compare"
import { widgetLineCompare } from "./echartsConfigJson/widget-line-compare"
import {widgetText} from "./echartsConfigJson/widget-text"
import {widgetMarquee} from "./echartsConfigJson/widget-marquee"
import {widgetHref} from "./echartsConfigJson/widget-href"
import {widgetTime} from "./echartsConfigJson/widget-time"
import {widgetImage} from "./echartsConfigJson/widget-image"
import {widgetSliders} from "./echartsConfigJson/widget-slider"
import {widgetVideo} from "./echartsConfigJson/widget-video"
import {widgetTable} from "./echartsConfigJson/widget-table"
import {widgetIframe} from "./echartsConfigJson/widget-iframe"
import {widgetUniversal} from "./echartsConfigJson/widget-universal"
import {widgetBarchart} from "./echartsConfigJson/widget-barchart"
import {widgetGradientBarchart} from "./echartsConfigJson/widget-gradient-barchart"
import {widgetLinechart} from "./echartsConfigJson/widget-linechart"
import {widgetBarlinechart} from "./echartsConfigJson/widget-barlinechart"
import {widgetPiechart} from "./echartsConfigJson/widget-piechart"
import {widgetFunnel} from "./echartsConfigJson/widget-funnel"
import {widgetGauge} from "./echartsConfigJson/widget-gauge"
import {widgetMap} from "./echartsConfigJson/widget-map"
import {WidgetPieNightingale} from "./echartsConfigJson/widget-pie-nightingale"
import {widgetPiePercentage} from "./echartsConfigJson/widget-pie-percentage"
import {widgetAirbubbleMap} from "./echartsConfigJson/widget-airbubble-map"
import {widgetBarStack} from "./echartsConfigJson/widget-bar-stack"
import {widgetLineStack} from "./echartsConfigJson/widget-line-stack"
import {widgetBarCompare} from "./echartsConfigJson/widget-bar-compare"
import {widgetLineCompare} from "./echartsConfigJson/widget-line-compare"
import {widgetDecoratePie} from "./echartsConfigJson/widget-decorate-pie";
export const widgetTool = [
// type=html类型的组件
@ -59,5 +60,6 @@ export const widgetTool = [
widgetBarStack,
widgetLineStack,
widgetBarCompare,
widgetLineCompare
widgetLineCompare,
widgetDecoratePie
]

399
report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue
Unescape Escape View File

@ -0,0 +1,399 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
export default {
name: "widgetRotatePieChart",
components: {},
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
options: {
title: {},
series: [
{
type: 'pie',
zlevel: 1,
silent: true,
radius: ['98%', '97%'],
hoverAnimation: false,
color: "rgba(88,142,197,0.5)",
// animation:false, //charts3 no
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [1]
},
{
type: 'pie',
zlevel: 2,
silent: true,
radius: ['90%', '91%'],
startAngle: 50,
hoverAnimation: false,
// animation:false, //charts3 no
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: this.pie2()
},
{
type: 'pie',
zlevel: 3,
silent: true,
radius: ['88%', '87%'],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: this.pie2()
},
{
type: 'pie',
zlevel: 4,
silent: true,
radius: ['84%', '83%'],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: this.pie3()
},
{
type: 'pie',
zlevel: 5,
silent: true,
radius: ['80%', '78%'],
color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
startAngle: 50,
hoverAnimation: false,
// animation:false, //charts3 no
label: {
normal: {
show: false
},
},
data: [50, 20, 40]
},
{
name: "",
type: 'gauge',
splitNumber: 30, //刻度数量
min: 0,
max: 100,
radius: '73%', //图表尺寸
center: ['50%', '50%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: false,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[1, '#0dc2fe']
]
}
},
axisTick: {
show: false,
lineStyle: {
color: 'auto',
width: 2
},
length: 20,
splitNumber: 5
},
splitLine: {
show: true,
length: 32,
lineStyle: {
color: 'auto',
}
},
axisLabel: {
show: false
},
pointer: { //仪表盘指针
show: 0,
},
detail: {
show: 0,
},
},
{
//name: '统计',
type: 'gauge',
splitNumber: 30, //刻度数量
min: 0,
max: 100,
radius: '68%', //图表尺寸
center: ['50%', '50%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: true,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[0, '#0dc2fe'],
[1, '#0dc2fe']
]
}
},
axisTick: {
show: true,
lineStyle: {
color: '#0dc2fe',
width: 2
},
length: 20,
splitNumber: 5
},
splitLine: {
show: true,
length: 20,
lineStyle: {
color: '#0dc2fe',
}
},
axisLabel: {
show: false
},
pointer: { //仪表盘指针
show: 0,
},
detail: {
show: false,
borderColor: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 2,
offsetCenter: [0, '0%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#fff',
fontSize: 50,
},
formatter: '{value}'
},
data: []
},
{
type: 'pie',
zlevel: 20,
silent: true,
radius: ['60%', '59%'],
hoverAnimation: false,
color: '#2dc0c9',
// animation:false,
//data: [1],
labelLine: {
normal: {
show: false
}
}
},
{
name: '中间环形图',
type: 'pie',
radius: ['35%', '55%'],
avoidLabelOverlap: false,
hoverAnimation: false,
itemStyle: {
normal: {
color: '#80ADD2',
borderColor: '#3D4268',
}
},
label: {
normal: {
show: false,
position: 'center',
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
25, 25, 25, 25, 25, 25
]
},
]
},
optionsStyle: {}, // 样式
optionsCollapse: {}, // 图标属性
optionsSetup: {}
}
},
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: {
pie2() {
let dataArr = [];
for (var i = 0; i < 8; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 25,
itemStyle: {
normal: {
color: "rgba(88,142,197,0.5)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
},
pie3() {
let dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 25,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
},
editorOptions() {
//this.setOptionsTitle();
},
// 标题修改
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const title = {};
title.text = optionsCollapse.titleText;
title.show = optionsCollapse.isNoTitle;
title.left = optionsCollapse.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
};
title.subtext = optionsCollapse.subText;
title.subtextStyle = {
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize
};
this.options.title = title;
},
}
}
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>

1
report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue
Unescape Escape View File

@ -59,7 +59,6 @@ export default {
watch: {
value: {
handler(val) {
console.log(val);
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.setup;

4
report-ui/src/views/report/bigscreen/designer/widget/temp.vue
Unescape Escape View File

@ -35,6 +35,7 @@ import widgetBarStackChart from "./bar/widgetBarStackChart";
import widgetLineStackChart from "./line/widgetLineStackChart";
import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart";
import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
export default {
name: "WidgetTemp",
@ -62,7 +63,8 @@ export default {
widgetBarStackChart,
widgetLineStackChart,
widgetBarCompareChart,
widgetLineCompareChart
widgetLineCompareChart,
widgetDecoratePieChart
},
model: {
prop: "value",

4
report-ui/src/views/report/bigscreen/designer/widget/widget.vue
Unescape Escape View File

@ -46,6 +46,7 @@ import widgetBarStackChart from "./bar/widgetBarStackChart";
import widgetLineStackChart from "./line/widgetLineStackChart";
import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart";
import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
export default {
name: "Widget",
@ -73,7 +74,8 @@ export default {
widgetBarStackChart,
widgetLineStackChart,
widgetBarCompareChart,
widgetLineCompareChart
widgetLineCompareChart,
widgetDecoratePieChart
},
model: {
prop: "value",

Write Preview
Loading…
Cancel
Save