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

多柱线调整

Browse Source
qianming 3 years ago
parent a5258f1aa8
commit 6906ea3cc5
2 changed files with 133 additions and 128 deletions
Show Stats Download Patch File Download Diff File

37
report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js
Unescape Escape View File

@ -351,14 +351,6 @@ export const widgetMoreBarLine = {
placeholder: '', placeholder: '',
value: 14, value: 14,
}, },
{
type: 'el-input-number',
label: '左均分',
name: 'splitNumberLeft',
required: false,
placeholder: '',
value: ''
},
{ {
type: 'el-switch', type: 'el-switch',
label: '右显示', label: '右显示',
@ -391,14 +383,6 @@ export const widgetMoreBarLine = {
placeholder: '', placeholder: '',
value: 14, value: 14,
}, },
{
type: 'el-input-number',
label: '右均分',
name: 'splitNumberRight',
required: false,
placeholder: '',
value: ''
},
{ {
type: 'vue-color', type: 'vue-color',
label: '数值颜色', label: '数值颜色',
@ -415,14 +399,6 @@ export const widgetMoreBarLine = {
placeholder: '', placeholder: '',
value: 14, value: 14,
}, },
{
type: 'el-switch',
label: '轴反转',
name: 'reversalY',
required: false,
placeholder: '',
value: false
},
{ {
type: 'vue-color', type: 'vue-color',
label: '轴颜色', label: '轴颜色',
@ -642,11 +618,14 @@ export const widgetMoreBarLine = {
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: [ value: [
{"datetime": "2021-06-18", "unsales": 21, "manus": 252, "rework": 38, "sales": 231, "return": 7}, {"date": "2014", "unsales": 400, "manus": 300, "rework": 400, "sales": 4.2,},
{"datetime": "2021-06-19", "unsales": 8, "manus": 133, "rework": 22, "sales": 140, "return": 14}, {"date": "2015", "unsales": 400, "manus": 500, "rework": 300, "sales": 3.6,},
{"datetime": "2021-06-20", "unsales": 19, "manus": 189, "rework": 26, "sales": 170, "return": 7}, {"date": "2016", "unsales": 300, "manus": 500, "rework": 500, "sales": 5.8,},
{"datetime": "2021-06-21", "unsales": 28, "manus": 219, "rework": 21, "sales": 191, "return": 6}, {"date": "2017", "unsales": 300, "manus": 500, "rework": 700, "sales": 3.4,},
{"datetime": "2021-06-22", "unsales": 15, "manus": 159, "rework": 19, "sales": 144, "return": 9} {"date": "2018", "unsales": 400, "manus": 400, "rework": 1000, "sales": 2.5,},
{"date": "2019", "unsales": 400, "manus": 500, "rework": 500, "sales": 5.8,},
{"date": "2020", "unsales": 300, "manus": 400, "rework": 600, "sales": 7.6,},
{"date": "2021", "unsales": 300, "manus": 600, "rework": 400, "sales": 3.4,},
] ]
}, },
{ {

224
report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue
Unescape Escape View File

@ -6,8 +6,9 @@
<script> <script>
import echarts from "echarts";
export default { export default {
//https://echarts.apache.org/examples/zh/editor.html?c=multiple-y-axis
name: "widgetMoreBarLineChart", name: "widgetMoreBarLineChart",
components: {}, components: {},
props: { props: {
@ -18,99 +19,160 @@ export default {
return { return {
options: { options: {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'item',
axisPointer: { axisPointer: {
type: 'cross' type: 'shadow'
} }
}, },
grid: { grid: {
right: '20%' left: '2%',
right: '4%',
bottom: '14%',
top: '16%',
containLabel: true
}, },
legend: { legend: {
data: ['Evaporation', 'Precipitation', 'Temperature'] data: ['调解成功', '调解失败', '调解终止', '调解成功率'],
left: '7%',
top: '5%',
textStyle: {
color: "#666666"
},
itemWidth: 15,
itemHeight: 10,
itemGap: 25
},
xAxis: {
type: 'category',
data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
axisLine: {
lineStyle: {
color: '#cdd5e2'
}
},
axisLabel: {
textStyle: {
color: "#666666"
}
},
}, },
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
// prettier-ignore
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: 'Evaporation',
min: 0,
max: 250,
position: 'right',
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#5470C6' color: '#cdd5e2'
} }
}, },
splitLine: {
show: false,
},
axisLabel: { axisLabel: {
formatter: '{value} ml' textStyle: {
} color: "#666666"
},
{
type: 'value',
name: 'Precipitation',
min: 0,
max: 250,
position: 'right',
offset: 80,
axisLine: {
show: true,
lineStyle: {
color: '#91CC75'
} }
}, },
axisLabel: {
formatter: '{value} ml'
}
}, },
{ {
type: 'value', type: "value",
name: '温度', nameTextStyle: {
min: 0, color: "#666666"
max: 25, },
position: 'left', position: "right",
axisLine: { axisLine: {
show: true,
lineStyle: { lineStyle: {
color: '#EE6666' color: '#cdd5e2'
} }
}, },
splitLine: {
show: false,
},
axisLabel: { axisLabel: {
formatter: '{value} °C' show: true,
textStyle: {
color: "#666666"
}
} }
} }
], ],
series: [ series: [
{ {
name: 'Evaporation', name: '调解成功',
type: 'bar', type: 'bar',
data: [ barWidth: '12px',
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 itemStyle: {
] normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#29acff'
}, {
offset: 1,
color: '#4bdfff'
}]),
barBorderRadius: 6,
},
},
data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
}, },
{ {
name: 'Precipitation', name: '调解失败',
type: 'bar', type: 'bar',
yAxisIndex: 1, barWidth: '12px',
data: [ itemStyle: {
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 normal: {
] color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3d93f2'
}, {
offset: 1,
color: '#5dc1fd'
}]),
barBorderRadius: 6,
}
},
data: [400, 500, 500, 500, 500, 400, 400, 500, 500]
}, },
{ {
name: 'Temperature', name: '调解终止',
type: 'line', type: 'bar',
yAxisIndex: 2, barWidth: '12px',
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#01c871'
}, {
offset: 1,
color: '#55f49c'
}]),
barBorderRadius: 6,
}
},
data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
},
{
name: "调解成功率",
type: "line",
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
smooth: false, //平滑曲线显示
symbol: "circle", //标记的图形为实心圆
symbolSize: 8, //标记的大小
itemStyle: {
normal: {
color: '#ffa43a',
borderColor: 'rgba(255, 234, 0, 0.5)', //圆点透明 边框
borderWidth: 5
},
},
lineStyle: {
color: "#ffa43a"
},
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
} }
] ]
} }
@ -151,8 +213,9 @@ export default {
// 修改图标options属性 // 修改图标options属性
editorOptions() { editorOptions() {
this.setOptionsTitle(); this.setOptionsTitle();
/*this.setOptionsX(); this.setOptionsX();
this.setOptionsY(); this.setOptionsY();
/*
this.setOptionsTop(); this.setOptionsTop();
this.setOptionsBar(); this.setOptionsBar();
this.setOptionsTooltip(); this.setOptionsTooltip();
@ -225,14 +288,12 @@ export default {
const yAxis = [ const yAxis = [
{ {
type: "value", type: "value",
splitNumber: optionsSetup.splitNumberLeft,// 均分
show: optionsSetup.isShowYLeft, // 坐标轴是否显示 show: optionsSetup.isShowYLeft, // 坐标轴是否显示
name: optionsSetup.textNameYLeft, // 坐标轴名称 name: optionsSetup.textNameYLeft, // 坐标轴名称
nameTextStyle: { // 别名 nameTextStyle: { // 别名
color: optionsSetup.nameColorYLeft, color: optionsSetup.nameColorYLeft,
fontSize: optionsSetup.namefontSizeYLeft fontSize: optionsSetup.namefontSizeYLeft
}, },
inverse: optionsSetup.reversalY, // 轴反转
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
@ -241,7 +302,7 @@ export default {
} }
}, },
axisLine: { axisLine: {
show: true, show: optionsSetup.isShowYLeft,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorY color: optionsSetup.lineColorY
} }
@ -252,14 +313,13 @@ export default {
}, },
{ {
type: "value", type: "value",
splitNumber: optionsSetup.splitNumberRight,// 均分 position: "right",
show: optionsSetup.isShowYRight, // 坐标轴是否显示 show: optionsSetup.isShowYRight, // 坐标轴是否显示
name: optionsSetup.textNameYRight, // 坐标轴名称 name: optionsSetup.textNameYRight, // 坐标轴名称
nameTextStyle: { // 别名 nameTextStyle: { // 别名
color: optionsSetup.nameColorYRight, color: optionsSetup.nameColorYRight,
fontSize: optionsSetup.namefontSizeYRight fontSize: optionsSetup.namefontSizeYRight
}, },
inverse: optionsSetup.reversalY, // 轴反转
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
@ -268,7 +328,7 @@ export default {
} }
}, },
axisLine: { axisLine: {
show: true, show: optionsSetup.isShowYRight,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorY color: optionsSetup.lineColorY
} }
@ -280,40 +340,6 @@ export default {
]; ];
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
// 折线设置 数值设置
setOptionsTop() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "line") {
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
};
}
series[key].lineStyle = {
width: optionsSetup.lineWidth
};
series[key].itemStyle.borderRadius = optionsSetup.radius;
series[key].label = {
show: optionsSetup.isShowLine,
position: "top",
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine
};
}
}
this.options.series = series;
},
// 柱体设置 数值设置 // 柱体设置 数值设置
setOptionsBar() { setOptionsBar() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;

Write Preview
Loading…
Cancel
Save