diff --git a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js index 7c68b7da..32fe15c4 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js @@ -48,7 +48,7 @@ export const widgetLineCompare = { name: 'pointSize', required: false, placeholder: '', - value: 10, + value: 5, }, { type: 'el-switch', @@ -80,7 +80,7 @@ export const widgetLineCompare = { name: 'lineWidth', required: false, placeholder: '', - value: 4, + value: 2, }, ], }, @@ -281,7 +281,7 @@ export const widgetLineCompare = { name: 'scaleYTop', required: false, placeholder: '', - value: true, + value: false, }, { type: 'el-input-number', @@ -397,7 +397,7 @@ export const widgetLineCompare = { name: 'scaleYBottom', required: false, placeholder: '', - value: true, + value: false, }, { type: 'el-input-number', @@ -520,19 +520,31 @@ export const widgetLineCompare = { name: '提示语设置', list: [ { - type: 'el-input-number', - label: '字体大小', - name: 'tipsFontSize', + type: 'el-switch', + label: '显示', + name: 'tipShow', required: false, placeholder: '', - value: 16 + value: true, }, { - type: 'vue-color', - label: '字体颜色', - name: 'lineColor', + type: 'el-select', + label: '类型', + name: 'tipType', required: false, placeholder: '', + selectOptions: [ + {code: 'line', name: '线形'}, + {code: 'cross', name: '十字形'}, + ], + value: 'line' + }, + { + type: 'vue-color', + label: '颜色', + name: 'tipColor', + required: false, + placeholder: '#e68b55', }, ], }, diff --git a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-stack.js b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-stack.js index af05a399..d6b01a7c 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-stack.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-stack.js @@ -1,6 +1,6 @@ /* * @Descripttion: 折线堆叠图 json - * @version: + * @version: * @Author: qianlishi * @Date: 2021-08-29 07:38:17 * @LastEditors: qianlishi @@ -56,7 +56,7 @@ export const widgetLineStack = { name: 'pointSize', required: false, placeholder: '', - value: 10, + value: 5, }, { type: 'el-switch', @@ -669,4 +669,4 @@ export const widgetLineStack = { }, ], } - } \ No newline at end of file + } diff --git a/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue index 8dece481..f6cf808e 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue @@ -33,18 +33,18 @@ export default { axisPointer: { type: 'line', lineStyle: { - color: 'ffffff', + color: '#ffffff', type: 'dashed', }, }, /*axisPointer: { type: 'cross', lineStyle: { - color: 'ffffff', + color: '#ffffff', type: 'dashed', }, crossStyle: { - color: 'ffffff', + color: '#ffffff', } },*/ }, @@ -182,6 +182,9 @@ export default { type: 'line', xAxisIndex: 0, yAxisIndex: 0, + showSymbol: true,// 标记点 + symbol: 'circle', + symbolSize: 5, smooth: true, // 曲线，折线 itemStyle: { color: '#36c5e7', @@ -190,7 +193,7 @@ export default { color: '#36c5e7', width: 2, }, - label: { + label: { // 数值 position: 'top', distance: 10, show: true, @@ -204,6 +207,9 @@ export default { type: 'line', xAxisIndex: 1, yAxisIndex: 1, + showSymbol: true,// 标记点 + symbol: 'circle', + symbolSize: 5, smooth: true, // 曲线，折线 itemStyle: { color: '#e68b55', @@ -212,7 +218,7 @@ export default { color: '#e68b55', width: 2, }, - label: { + label: {// 数值 position: 'bottom', distance: 10, show: true, @@ -267,11 +273,11 @@ export default { this.setOptionsX(); this.setOptionsYTop(); this.setOptionsYBottom(); - // this.setOptionsTop(); - // this.setOptionsTooltip(); + this.setOptionsTop(); + this.setOptionsTooltip(); this.setOptionsGrid(); - // this.setOptionsLegend(); - // this.setOptionsColor(); + this.setOptionsLegend(); + this.setOptionsColor(); this.setOptionsData(); }, // 标题修改 @@ -427,57 +433,77 @@ export default { } this.options.yAxis[1] = yAxis }, - // 数值设定、柱体设置 + // 数值设定 折线设置 setOptionsTop() { const optionsSetup = this.optionsSetup; - const series = this.options.series; + const series = this.options.series + // 折线 for (const key in series) { - if (series[key].type == "bar") { - series[0].label = { - normal: { - show: optionsSetup.isShow, - position: 'insideLeft', - textStyle: { - fontSize: optionsSetup.fontSize, - color: optionsSetup.subTextColor, - fontWeight: optionsSetup.fontWeight - } - }, - emphasis: { - show: false, - }, - }, - series[1].label = { - normal: { - show: optionsSetup.isShow, - color: 'red', - position: 'insideRight', - textStyle: { - fontSize: optionsSetup.fontSize, - color: optionsSetup.subTextColor, - fontWeight: optionsSetup.fontWeight - } - }, - emphasis: { - show: false, - }, - }, - series[key].barWidth = optionsSetup.maxWidth; + series[key].showSymbol = optionsSetup.markPoint + series[key].symbolSize = optionsSetup.pointSize + series[key].smooth = optionsSetup.smoothCurve + if (optionsSetup.area) { + series[key].areaStyle = { + opacity: optionsSetup.areaThickness / 100 + } + } else { + series[key].areaStyle = { + opacity: 0 + } + } + } + // 数值 + if (series[0].type == 'line') { + series[0].label = { + position: 'top', + distance: 10, + show: optionsSetup.isShow, + color: optionsSetup.subTextColor, + fontSize: optionsSetup.fontSize, + fontWeight: optionsSetup.fontWeight + } + series[1].label = { + position: 'bottom', + distance: 10, + show: optionsSetup.isShow, + color: optionsSetup.subTextColor, + fontSize: optionsSetup.fontSize, + fontWeight: optionsSetup.fontWeight } } - this.options.series = series; }, // tooltip 提示语设置 setOptionsTooltip() { const optionsSetup = this.optionsSetup; - const tooltip = { - trigger: "item", - show: true, - textStyle: { - color: optionsSetup.lineColor, - fontSize: optionsSetup.fontSize + let tooltip = {} + if (optionsSetup.tipType == "line") { + tooltip = { + show: optionsSetup.tipShow, + trigger: 'axis', + axisPointer: { + type: optionsSetup.tipType, + lineStyle: { + color: optionsSetup.tipColor, + type: 'dashed', + }, + }, } - }; + } else { + tooltip = { + show: optionsSetup.tipShow, + trigger: 'axis', + axisPointer: { + type: optionsSetup.tipType, + lineStyle: { + color: optionsSetup.tipColor, + type: 'dashed', + }, + crossStyle: { + color: optionsSetup.tipColor, + } + }, + } + } this.options.tooltip = tooltip; }, // 边距设置 @@ -517,31 +543,27 @@ export default { }; legend.itemWidth = optionsSetup.lengedWidth; }, - // 颜色修改、圆角修改 + // 颜色修改、宽度修改 setOptionsColor() { const optionsSetup = this.optionsSetup; const customColor = optionsSetup.customColor; - if (!customColor) return; - const itemStyleLeft = { - normal: { - color: customColor[0].color, - barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius] - }, - emphasis: { - show: false, - }, + const series = this.options.series + const arrColor = []; + for (let i = 0; i < customColor.length; i++) { + arrColor.push(customColor[i].color); } - const itemStyleRight = { - normal: { - color: customColor[1].color, - barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0] - }, - emphasis: { - show: false, - }, + if (!customColor) return; + for (const key in series) { + const itemStyle = { + color: arrColor[key], + } + const lineStyle = { + color: arrColor[key], + width: optionsSetup.lineWidth, + } + this.options.series[key].itemStyle = itemStyle + this.options.series[key].lineStyle = lineStyle } - this.options.series[0].itemStyle = itemStyleLeft; - this.options.series[1].itemStyle = itemStyleRight; }, // 数据解析 setOptionsData() { diff --git a/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineStackChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineStackChart.vue index aa8f15fb..6bd25b74 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineStackChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineStackChart.vue @@ -319,7 +319,6 @@ export default { symbol: 'circle', showSymbol: optionsSetup.markPoint, symbolSize: optionsSetup.pointSize, - symbolColor: arrColor[i], smooth: optionsSetup.smoothCurve, // 线条 lineStyle: { diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue index 9b87050b..615d97c3 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue @@ -277,7 +277,6 @@ export default { fontSize: optionsCollapse.fontSize }; legend.itemWidth = optionsCollapse.lengedWidth; - console.log(legend); }, // 图例颜色修改 setOptionsColor() {