|
@@ -67,12 +67,46 @@ export const zhudanOption = reactive({
|
|
|
right: '10px',
|
|
|
textStyle: { fontSize: 12, color: '#fff' },
|
|
|
},
|
|
|
- grid: { x: 50, y: 60, x2: 12, y2: 60 },
|
|
|
+ grid: { x: 45, y: 60, x2: 45, y2: 60 },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
axisLine: { lineStyle: { color: '#57617B' } },
|
|
|
- axisLabel: { color: '#ffffffcc' },
|
|
|
+ axisLabel: { color: '#ffffffcc',
|
|
|
+ formatter: function (params) {
|
|
|
+ let newParamsName = ref('') // 最终拼接成的字符串
|
|
|
+ let paramsNameNumber = ref(params.length) // 实际标签的个数
|
|
|
+ let provideNumber = ref(10) // 每行能显示的字的个数
|
|
|
+ let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话,需要显示几行,向上取整
|
|
|
+ /**
|
|
|
+ * 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
|
|
|
+ */
|
|
|
+ // 条件等同于rowNumber>1
|
|
|
+ if (paramsNameNumber.value > provideNumber.value) {
|
|
|
+ /** 循环每一行,p表示行 */
|
|
|
+ for (var p = 0; p < rowNumber; p++) {
|
|
|
+ var tempStr = '' // 表示每一次截取的字符串
|
|
|
+ var start = p * provideNumber.value // 开始截取的位置
|
|
|
+ var end = start + provideNumber.value // 结束截取的位置
|
|
|
+ // 此处特殊处理最后一行的索引值
|
|
|
+ if (p == rowNumber - 1) {
|
|
|
+ // 最后一次不换行
|
|
|
+ tempStr = params.substring(start, paramsNameNumber.value)
|
|
|
+ } else {
|
|
|
+ // 每一次拼接字符串并换行
|
|
|
+ tempStr = params.substring(start, end) + '\n'
|
|
|
+ }
|
|
|
+ newParamsName.value += tempStr // 最终拼成的字符串
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 将旧标签的值赋给新标签
|
|
|
+ newParamsName.value = params
|
|
|
+ }
|
|
|
+ //将最终的字符串返回
|
|
|
+ return newParamsName.value
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
splitLine: { show: true, lineStyle: { color: '#57617B22', type: 'dashed' } },
|
|
|
data: [],
|
|
|
},
|
|
@@ -80,7 +114,7 @@ export const zhudanOption = reactive({
|
|
|
{
|
|
|
type: 'value',
|
|
|
name: 'm³/h',
|
|
|
- max: 10,
|
|
|
+ max: 6000,
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
@@ -92,7 +126,7 @@ export const zhudanOption = reactive({
|
|
|
{
|
|
|
type: 'value',
|
|
|
name: 'm³/h',
|
|
|
- max: 10,
|
|
|
+ max: 2000,
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
@@ -106,7 +140,6 @@ export const zhudanOption = reactive({
|
|
|
{
|
|
|
name: '累计流量',
|
|
|
type: 'line',
|
|
|
-
|
|
|
smooth: true,
|
|
|
lineStyle: { width: 2 },
|
|
|
yAxisIndex: 0,
|