fix:修改图表细节

ZhangXianQiang

2024-03-04 c2b99128ae30b4f3ecc9afbb99e39194079ee8e0

fix:修改图表细节

 src/views/daoAnOffice/right/analysis/index.vue

@@ -61,33 +61,33 @@
const testData1 = ref([
  {
    name: '都江堰市',
    state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233,'2023-4': 2132, '2023-5': 2999 },
    state2: { '2023-1': 12312, '2023-2': 2312, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
    state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233, '2023-4': 2132, '2023-5': 2999 },
    state2: { '2023-1': 12312, '2023-2': 2312, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '奎光塔街道',
    state: { '2023-1': 21, '2023-2': 12, '2023-3': 224,'2023-4': 662, '2023-5': 71 },
    state2: { '2023-1': 12312, '2023-2': 21, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
    state: { '2023-1': 21, '2023-2': 12, '2023-3': 224, '2023-4': 662, '2023-5': 71 },
    state2: { '2023-1': 12312, '2023-2': 21, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '蒲阳街道',
    state: { '2023-1': 1000, '2023-2': 2131, '2023-3': 1233,'2023-4': 2132, '2023-5': 3211 },
    state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
    state: { '2023-1': 1000, '2023-2': 2131, '2023-3': 1233, '2023-4': 2132, '2023-5': 3211 },
    state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '聚源镇',
    state: { '2023-1': 1000, '2023-2': 500, '2023-3': 1111,'2023-4': 2132, '2023-5': 2999 },
    state2: { '2023-1': 12312, '2023-2': 2222, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
    state: { '2023-1': 1000, '2023-2': 500, '2023-3': 1111, '2023-4': 2132, '2023-5': 2999 },
    state2: { '2023-1': 12312, '2023-2': 2222, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '银杏街道',
    state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233,'2023-4': 2132, '2023-5': 12 },
    state2: { '2023-1': 1231, '2023-2': 121, '2023-3': 123,'2023-4': 321, '2023-5': 2999 }
    state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233, '2023-4': 2132, '2023-5': 12 },
    state2: { '2023-1': 1231, '2023-2': 121, '2023-3': 123, '2023-4': 321, '2023-5': 2999 }
  },
  {
    name: '石羊镇',
    state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233,'2023-4': 123, '2023-5': 0 },
    state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241,'2023-4': 2132, '2023-5': 2999 }
    state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233, '2023-4': 123, '2023-5': 0 },
    state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241, '2023-4': 2132, '2023-5': 2999 }
  },
]);
let acitveData = ref(testData1.value[0]);
@@ -135,8 +135,21 @@
    dimensions: ['name', 'state1', 'state2', 'state3'],
    source: testData.value
  },
  xAxis: { type: 'category', axisTick: false },
  yAxis: {},
  xAxis: {
    type: 'category',
    axisTick: false,
    axisLabel: {
      fontSize: 14,
      color: '#4D76B0',
      margin: 15
    },
  },
  yAxis: {
    axisLabel: {
      fontSize: 14,
      color: '#4D76B0',
    },
  },
  series: [
    {
      type: 'bar',
@@ -255,9 +268,21 @@
    tooltip: {
      show: true,
      trigger: 'axis',
      backgroundColor: '#000001cc',
      borderWidth: 0,
      textStyle: {
        color: '#4D76B0',
        fontSize: 16
      },
      axisPointer: {
        type: 'shadow',

        lable: {
          color: '#000000'
        }
      },
      padding: [20, 25],
      formatter: function (params) {
        return params[0].name + '<br/>' + params[0].seriesName + ':' + `<span style="color:rgba(207, 178, 73, 1)">${params[0].value}</span>` + '<br/>' + params[1].seriesName + ':' + `<span style="color:rgba(43, 176, 109, 1)">${params[1].value}</span>`;
      }
    },
    grid: {
@@ -269,10 +294,20 @@
    },
    xAxis: {
      type: 'category',
      data: Object.keys(acitveData.value.state)
      data: Object.keys(acitveData.value.state),
      axisLabel: {
        fontSize: 14,
        color: '#4D76B0',
        margin: 15
      },
      axisTick: false
    },
    yAxis: {
      type: 'value'
      type: 'value',
      axisLabel: {
        fontSize: 14,
        color: '#4D76B0'
      }
    },
    series: [
      {
@@ -362,4 +397,5 @@
  .el-input__inner {
    color: #4481DD;
  }
}</style>
}
</style>