数据模板

zxl

2026-03-25 19dd419f262406bc9fa1f09d731a1f44aebd8505

数据模板

 src/views/dataAnalysis/components/DataReLineChart.vue

@@ -247,23 +247,29 @@
          shadowBlur: 10,
          formatter: (params) => {
            let strName1 = params[0].name
            let value1 = params[0] ? params[0].value : 0
            let value2 = params[1] ? params[1].value : 0
            let value3 = params[2] ? params[2].value : 0
            let value4 = params[3] ? params[3].value : 0
            return `<div style="color:#fff;font-size:16px;">${strName1}</div>
              <div><span style="color:#fff;display: inline-block;width: 86px;">${
                this.chartData.barName
              }</span><span style="color:#5DB6FB">${value1}
              </span></div><div><span style="color:#fff;display: inline-block;width: 86px;">${
                this.chartData.lineName
              }</span><span style="color:#5DB6FB">${value2}
              </span></div><div><span style="color:#fff;display: inline-block;width: 86px;">${
                this.chartData.barName2
              }</span><span style="color:#FF6B6B">${value3}
              </span></div><div><span style="color:#fff;display: inline-block;width: 86px;">${
                this.chartData.lineName2
              }</span><span style="color:#FFD93D">${value4}</span>`
            let result = `<div style="color:#fff;font-size:16px;">${strName1}</div>`
            
            if (params[0] && this.chartData.barName) {
              let value1 = params[0].value !== undefined ? params[0].value : 0
              result += `<div><span style="color:#fff;display: inline-block;width: 86px;">${this.chartData.barName}</span><span style="color:#5DB6FB">${value1}</span></div>`
            }
            
            if (params[1] && this.chartData.lineName) {
              let value2 = params[1].value !== undefined ? params[1].value : 0
              result += `<div><span style="color:#fff;display: inline-block;width: 86px;">${this.chartData.lineName}</span><span style="color:#5DB6FB">${value2}</span></div>`
            }
            
            if (params[2] && this.chartData.barName2) {
              let value3 = params[2].value !== undefined ? params[2].value : 0
              result += `<div><span style="color:#fff;display: inline-block;width: 86px;">${this.chartData.barName2}</span><span style="color:#FF6B6B">${value3}</span></div>`
            }
            
            if (params[3] && this.chartData.lineName2) {
              let value4 = params[3].value !== undefined ? params[3].value : 0
              result += `<div><span style="color:#fff;display: inline-block;width: 86px;">${this.chartData.lineName2}</span><span style="color:#FFD93D">${value4}</span></div>`
            }
            
            return result
          },
          textStyle: {
            rich: {
@@ -322,8 +328,11 @@
          },
        ],

        series: [
          {
        series: [],
      }
      
      if (this.chartData.barData) {
        option.series.push({
            name: this.chartData.barName,
            type: 'bar',
            barWidth: '12px',
@@ -342,9 +351,11 @@
              },
            },
            data: this.chartData.barData,
          },
        })
      }

          {
      if (this.chartData.lineData) {
        option.series.push({
            name: this.chartData.lineName,
            type: 'bar',
            barWidth: '12px',
@@ -363,9 +374,11 @@
              },
            },
            data: this.chartData.lineData,
          },
        })
      }

          {
      if (this.chartData.barData2) {
        option.series.push({
            name: this.chartData.barName2,
            type: 'bar',
            barWidth: '12px',
@@ -384,9 +397,11 @@
              },
            },
            data: this.chartData.barData2,
          },
        })
      }

          {
      if (this.chartData.lineData2) {
        option.series.push({
            name: this.chartData.lineName2,
            type: 'bar',
            barWidth: '12px',
@@ -405,9 +420,9 @@
              },
            },
            data: this.chartData.lineData2,
          },
        ],
        })
      }
      
      option && this.chartEntity.setOption(option, true)
      this.bindChartClick()
    },