数据模板

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,92 +328,101 @@
          },
        ],

        series: [
          {
            name: this.chartData.barName,
            type: 'bar',
            barWidth: '12px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#5B81F9',
                  },
                  {
                    offset: 1,
                    color: '#151A22',
                  },
                ]),
              },
            },
            data: this.chartData.barData,
          },

          {
            name: this.chartData.lineName,
            type: 'bar',
            barWidth: '12px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#16B777',
                  },
                  {
                    offset: 1,
                    color: '#0D6E4A',
                  },
                ]),
              },
            },
            data: this.chartData.lineData,
          },

          {
            name: this.chartData.barName2,
            type: 'bar',
            barWidth: '12px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#FF6B6B',
                  },
                  {
                    offset: 1,
                    color: '#8B0000',
                  },
                ]),
              },
            },
            data: this.chartData.barData2,
          },

          {
            name: this.chartData.lineName2,
            type: 'bar',
            barWidth: '12px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#FFD93D',
                  },
                  {
                    offset: 1,
                    color: '#B8860B',
                  },
                ]),
              },
            },
            data: this.chartData.lineData2,
          },
        ],
        series: [],
      }
      
      if (this.chartData.barData) {
        option.series.push({
          name: this.chartData.barName,
          type: 'bar',
          barWidth: '12px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#5B81F9',
                },
                {
                  offset: 1,
                  color: '#151A22',
                },
              ]),
            },
          },
          data: this.chartData.barData,
        })
      }

      if (this.chartData.lineData) {
        option.series.push({
          name: this.chartData.lineName,
          type: 'bar',
          barWidth: '12px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#16B777',
                },
                {
                  offset: 1,
                  color: '#0D6E4A',
                },
              ]),
            },
          },
          data: this.chartData.lineData,
        })
      }

      if (this.chartData.barData2) {
        option.series.push({
          name: this.chartData.barName2,
          type: 'bar',
          barWidth: '12px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#FF6B6B',
                },
                {
                  offset: 1,
                  color: '#8B0000',
                },
              ]),
            },
          },
          data: this.chartData.barData2,
        })
      }

      if (this.chartData.lineData2) {
        option.series.push({
          name: this.chartData.lineName2,
          type: 'bar',
          barWidth: '12px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#FFD93D',
                },
                {
                  offset: 1,
                  color: '#B8860B',
                },
              ]),
            },
          },
          data: this.chartData.lineData2,
        })
      }
      
      option && this.chartEntity.setOption(option, true)
      this.bindChartClick()
    },