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

折线对比图

Browse Source
qianming 4 years ago
parent 893f623fbe
commit 22f31ae9ca
2 changed files with 337 additions and 295 deletions
Show Stats Download Patch File Download Diff File

118
report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js
Unescape Escape View File

@ -31,27 +31,59 @@ export const widgetLineCompare = {
value: ''
},
[
/*{
name: '柱体设置',
{
name: '折线设置',
list: [
{
type: 'el-switch',
label: '标记点',
name: 'markPoint',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '最大宽度',
name: 'maxWidth',
label: '点大小',
name: 'pointSize',
required: false,
placeholder: '',
value: 15,
value: 10,
},
{
type: 'el-switch',
label: '平滑曲线',
name: 'smoothCurve',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '面积堆积',
name: 'area',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
label: '面积厚度',
name: 'areaThickness',
required: false,
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '线条宽度',
name: 'lineWidth',
required: false,
placeholder: '',
value: 4,
},
],
},*/
},
{
name: '标题设置',
list: [
@ -117,12 +149,12 @@ export const widgetLineCompare = {
],
},
{
name: '左X轴设置',
name: 'X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideXLeft',
name: 'isShowX',
required: false,
placeholder: '',
value: true,
@ -130,15 +162,23 @@ export const widgetLineCompare = {
{
type: 'el-input-number',
label: '数值间隔',
name: 'splitNumberLeft',
name: 'splitNumberX',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '数值居中',
name: 'boundaryX',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'XcolorLeft',
name: 'colorX',
required: false,
placeholder: '',
value: '#fff',
@ -146,7 +186,7 @@ export const widgetLineCompare = {
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeXLeft',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
@ -154,68 +194,36 @@ export const widgetLineCompare = {
{
type: 'el-switch',
label: '刻度线',
name: 'tickLineLeft',
name: 'tickLineX',
require: false,
placeholder: '',
value: false,
value: true,
},
{
type: 'el-switch',
label: 'X轴线',
name: 'xLineLeft',
name: 'lineX',
require: false,
placeholder: '',
value: false,
value: true,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorXLeft',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '竖分割线',
name: 'SplitLineLeft',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'SplitLineColorLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'SplitLinefontSizeLeft',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '边框线',
name: 'frameLineLeft',
require: false,
placeholder: '',
value: false,
},
],
},
{
name: '右X轴设置',
name: '上y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideXRight',
name: 'isShowYTop',
required: false,
placeholder: '',
value: true,
@ -223,7 +231,7 @@ export const widgetLineCompare = {
{
type: 'el-input-number',
label: '数值间隔',
name: 'splitNumberRight',
name: 'splitNumberYTop',
required: false,
placeholder: '',
value: ''
@ -303,7 +311,7 @@ export const widgetLineCompare = {
],
},
{
name: 'Y轴设置',
name: '下Y轴设置',
list: [
{
type: 'el-switch',

116
report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue
Unescape Escape View File

@ -29,13 +29,24 @@ export default {
},
tooltip: {
show: true,
trigger: "axis",
trigger: 'axis',
axisPointer: {
type: "line",
type: 'line',
lineStyle: {
type: "dashed",
color: 'ffffff',
type: 'dashed',
},
},
/*axisPointer: {
type: 'cross',
lineStyle: {
color: 'ffffff',
type: 'dashed',
},
crossStyle: {
color: 'ffffff',
}
},*/
},
//边距
grid: [
@ -65,6 +76,7 @@ export default {
xAxis: [
{//
gridIndex: 0,
show: true,
type: 'category',
boundaryGap: true, // 居中
axisLine: { //x轴线
@ -79,6 +91,7 @@ export default {
axisLabel: { // X轴数据
show: true,
textStyle: {
interval: 0,
color: '#ffffff',
fontSize: 14
}
@ -87,6 +100,7 @@ export default {
},
{//
gridIndex: 1,
show: true,
type: 'category',
position: 'top',
boundaryGap: true, // 居中
@ -101,6 +115,7 @@ export default {
},
axisLabel: {
show: false,
interval: 0,
},
data: [],
},
@ -129,6 +144,9 @@ export default {
color: '#ffffff',
},
},
axisPointer: {
snap: true
},
},
{
gridIndex: 1,
@ -153,6 +171,9 @@ export default {
color: '#ffffff',
},
},
axisPointer: {
snap: true
},
},
],
series: [
@ -242,18 +263,18 @@ export default {
methods: {
// 修改图标options属性
editorOptions() {
/*this.setOptionsTitle();
this.setOptionsXLeft();
this.setOptionsXRight();
this.setOptionsY();
this.setOptionsTop();
this.setOptionsTooltip();
this.setOptionsGrid();
this.setOptionsLegend();
this.setOptionsColor();*/
this.setOptionsTitle();
this.setOptionsX();
// this.setOptionsXRight();
// this.setOptionsY();
// this.setOptionsTop();
// this.setOptionsTooltip();
// this.setOptionsGrid();
// this.setOptionsLegend();
// this.setOptionsColor();
this.setOptionsData();
},
/* // 标题修改
// 标题修改
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const title = {};
@ -267,40 +288,54 @@ export default {
};
this.options.title = title;
},
// 左X轴设置
setOptionsXLeft() {
// X轴设置
setOptionsX() {
const optionsSetup = this.optionsSetup;
const xAxisLeft = {
splitNumber: optionsSetup.splitNumberLeft,
type: 'value',
inverse: true,
axisLine: {//X轴线
show: optionsSetup.xLineLeft,
const xAxis0 = {
gridIndex: 0,
show: optionsSetup.isShowX,
type: 'category',
boundaryGap: optionsSetup.boundaryX, // 值居中
axisLine: { //x轴线
show: optionsSetup.lineX,
lineStyle: {
color: optionsSetup.lineColorXLeft,
},
color: optionsSetup.lineColorX,
}
},
axisTick: {
show: optionsSetup.tickLineLeft,
axisTick: { // 刻度
show: optionsSetup.tickLineX,
},
position: 'bottom',
axisLabel: { // x轴
show: optionsSetup.hideXLeft,
axisLabel: { // X轴数据
show: true,
interval: optionsSetup.splitNumberX,
textStyle: {
color: optionsSetup.XcolorLeft,
fontSize: optionsSetup.fontSizeXLeft
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX
}
},
splitLine: { // 分割线
show: optionsSetup.SplitLineLeft,
lineStyle: {
color: optionsSetup.SplitLineColorLeft,
width: optionsSetup.SplitLinefontSizeLeft,
type: 'solid'
}
const xAxis1 = {
gridIndex: 1,
show: optionsSetup.isShowX,
type: 'category',
position: 'top',
boundaryGap: optionsSetup.boundaryX, // 值居中
axisLine: { // x轴线
show: optionsSetup.lineX,
lineStyle: {
color: optionsSetup.lineColorX,
}
},
axisTick: { // 刻度
show: optionsSetup.tickLineX,
},
axisLabel: {
show: false,
interval: optionsSetup.splitNumberX,
},
}
this.options.xAxis[0] = xAxisLeft;
this.options.xAxis[0] = xAxis0;
this.options.xAxis[1] = xAxis1;
},
// 右X轴设置
setOptionsXRight() {
@ -415,12 +450,12 @@ export default {
this.options.tooltip = tooltip;
},
// 边距设置
getOptionsBottom(){
getOptionsBottom() {
const optionsSetup = this.optionsSetup;
let bottom = optionsSetup.marginBottom;
if (optionsSetup.hideXLeft) {
bottom = optionsSetup.marginBottom + 15
}else if (optionsSetup.hideXRight){
} else if (optionsSetup.hideXRight) {
bottom = optionsSetup.marginBottom + 15
}
return bottom
@ -495,7 +530,7 @@ export default {
}
this.options.series[0].itemStyle = itemStyleLeft;
this.options.series[1].itemStyle = itemStyleRight;
},*/
},
// 数据解析
setOptionsData() {
const optionsSetup = this.optionsSetup;
@ -544,7 +579,6 @@ export default {
data: data
})
}
console.log(arrayList)
this.options.series[0]['name'] = arrayList[0].name
this.options.series[0]['data'] = arrayList[0].data
this.options.series[1]['name'] = arrayList[1].name

Write Preview
Loading…
Cancel
Save