fix: 大屏样式优化

spring

12 小时以前 bc5cf4a258aba4774829ce421af83f9b4aedf4cc

fix: 大屏样式优化

 src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue

@@ -86,8 +86,8 @@
    showSymbol: true,
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: { color: 'rgba(11, 137, 254, 0.40)', width: 2 },
    itemStyle: { color: 'rgba(11, 137, 254, 0.40)', borderWidth: 0 },
    lineStyle: { color: 'rgba(11, 137, 254,1', width: 2 },
    itemStyle: { color: 'rgba(11, 137, 254, 1)', borderWidth: 0 },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(11, 137, 254, 0.40)' },
@@ -105,8 +105,8 @@
    symbol: 'circle',
    symbolSize: 8,
    
    lineStyle: { color: 'rgba(11, 249, 254, 0.5)', width: 2 },
    itemStyle: { color: 'rgba(11, 249, 254, 0.5)', borderWidth: 0 },
    lineStyle: { color: 'rgba(11, 249, 254, 1)', width: 2 },
    itemStyle: { color: 'rgba(11, 249, 254, 1)', borderWidth: 0 },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(11, 249, 254, 0.5)' },
@@ -121,10 +121,8 @@
const tooltip = {
  trigger: 'axis',
  axisPointer: { type: 'line' },
  backgroundColor: 'rgba(10, 28, 58, 0.9)',
  borderColor: 'rgba(78, 228, 255, 0.3)',
  borderWidth: 1,
  textStyle: { color: '#B8C8E0', fontSize: 12 },
  textStyle: { fontSize: 12 },
  formatter(params) {
    let result = params[0].axisValue + '<br/>'
    params.forEach((item) => {

 src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue

@@ -65,7 +65,7 @@
  formatter(params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
      result += `<div>${item.marker} ${item.seriesName}: ${item.value}</div>`
    })
    return result
  },

 src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue

@@ -123,7 +123,7 @@
// 双层环形饼图
const landSeries = ref([
  {
    name: '产品大类',
    name: '产品采购金额分析',
    type: 'pie',
    radius: ['40%', '60%'],
    center: ['25%', '50%'],

 src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue

@@ -109,7 +109,7 @@

const pieSeries = computed(() => [
  {
    name: '各产品销售金额分析',
    name: '产品销售金额分析',
    type: 'pie',
    radius: '60%',
    center: ['25%', '50%'],

 src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue

@@ -108,7 +108,7 @@
  formatter: function (params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
      result += `<div>${item.marker} ${item.seriesName}: ${item.value}</div>`
    })
    return result
  },

 src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue

@@ -83,17 +83,20 @@

// 提示框
const landTooltip = {
  triggerOn: 'click',
  // triggerOn: 'hover',
  alwaysShowContent: true,
  position: function (pt) {
    return [pt[0], 130]
  },
  formatter: function (params) {
    return `${params.name} (${params.value}类)`
  },
}

// 双层环形饼图
const landSeries = ref([
  {
    name: '外圈',
    name: '产品大类',
    type: 'pie',
    radius: ['35%', '55%'],
    center: ['50%', '50%'],
@@ -105,21 +108,22 @@
      lineHeight: 18,
      rich: {
        ...dotRich,
        parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20 },
        parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20, overflow: 'break' },
        child: { fontSize: 12, color: '#fff', lineHeight: 18 },
      },
      formatter: function (params) {
        const children = params?.data?.children || []
        const parentName = params?.data?.name || ''
        const parentValue = params?.data?.value ?? 0
        const rawVal = params?.data?.value
        const parentValue = typeof rawVal === 'number' && !Number.isNaN(rawVal) ? rawVal : (Number(rawVal) || 0)
        const dotKey = `dot${(params?.dataIndex || 0) % landColors.length}`
        const dot = `{${dotKey}|} `
        if (!children.length) return `${dot}{parent|${parentName} ${parentValue}}`
        // 小圆点 + 父级 name + 父级 value，换行展示 children 的 name + value
        return [
          `${dot}{parent|${parentName}}`,
          ...children.map((c) => `{child|${c.name}}`),
        ].join('\n')
        const parentLine = `${dot}{parent|${parentName} (${parentValue}类)}`
        if (!children.length) return parentLine
        // 父级全部显示；子级最多 5 个，超出显示省略号
        const displayed = children.slice(0, 5).map((c) => `{child|${c.name}}`)
        if (children.length > 5) displayed.push('{child|…}')
        return [parentLine, ...displayed].join('\n')
      },
    },
    labelLine: {

 src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue

@@ -104,7 +104,7 @@
  formatter: function (params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
      result += `<div>${item.marker} ${item.seriesName}: ${item.value}</div>`
    })
    return result
  },

 src/views/reportAnalysis/dataDashboard/components/basic/right-top.vue

@@ -120,7 +120,7 @@
    textStyle: { fontSize: '100%' },
    formatter: function (params) {
      let result = params[0].axisValueLabel + '<br/>'
      result += `<div style="">${params[0].marker}${params[0].value}</div>`
      result += `<div>${params[0].marker}${params[0].value}</div>`
      return result
    },
  }