YNUtdPlatform/pages/realName/index/components/bar-charts-model.vue

<template>
  <view class="charts-container">
    <qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleChartClick" />
  </view>
</template>

<script>
import { getHomePageListApi } from '@/api/phaseTwo/homePage'
export default {
  data() {
    return {
      chartData: {},
      opts: {
        timing: 'easeOut',
        duration: 1000,
        rotate: false,
        rotateLock: false,
        color: ['#fe8e04', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
        padding: [15, 15, 0, 5],
        fontSize: 13,
        fontColor: '#666666',
        dataLabel: true,
        dataPointShape: true,
        dataPointShapeType: 'solid',
        touchMoveLimit: 60,
        enableScroll: false,
        enableMarkLine: false,
        legend: {
          show: false,
          position: 'bottom',
          float: 'center',
          padding: 5,
          margin: 5,
          backgroundColor: 'rgba(0,0,0,0)',
          borderColor: 'rgba(0,0,0,0)',
          borderWidth: 0,
          fontSize: 13,
          fontColor: '#666666',
          lineHeight: 11,
          hiddenColor: '#CECECE',
          itemGap: 10
        },
        xAxis: {
          disableGrid: true,
          disabled: false,
          axisLine: true,
          axisLineColor: '#CCCCCC',
          calibration: false,
          fontColor: '#666666',
          fontSize: 13,
          lineHeight: 20,
          marginTop: 5,
          rotateLabel: true,
          rotateAngle: 35,
          itemCount: 5,
          boundaryGap: 'center',
          splitNumber: 5,
          gridColor: '#CCCCCC',
          gridType: 'dash',
          dashLength: 4,
          gridEval: 1,
          scrollShow: false,
          scrollAlign: 'left',
          scrollColor: '#A6A6A6',
          scrollBackgroundColor: '#EFEBEF',
          title: '',
          titleFontSize: 13,
          titleOffsetY: 0,
          titleOffsetX: 0,
          titleFontColor: '#666666',
          format: ''
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ],
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridType: 'dash',
          dashLength: 8,
          gridColor: '#CCCCCC',
          padding: 10,
          showTitle: false
        },
        extra: {
          column: {
            type: 'group',
            width: 10,
            activeBgColor: '#000000',
            activeBgOpacity: 0.08,
            seriesGap: 2,
            categoryGap: 3,
            barBorderCircle: false,
            linearType: 'none',
            linearOpacity: 1,
            colorStop: 0,
            meterBorder: 1,
            meterFillColor: '#FFFFFF',
            labelPosition: 'outside'
          },
          tooltip: {
            showBox: true,
            showArrow: true,
            showCategory: false,
            borderWidth: 0,
            borderRadius: 0,
            borderColor: '#000000',
            borderOpacity: 0.7,
            bgColor: '#000000',
            bgOpacity: 0.7,
            gridType: 'solid',
            dashLength: 4,
            gridColor: '#CCCCCC',
            boxPadding: 3,
            fontSize: 13,
            lineHeight: 20,
            fontColor: '#FFFFFF',
            legendShow: true,
            legendShape: 'auto',
            splitLine: true,
            horizentalLine: false,
            xAxisLabel: false,
            yAxisLabel: false,
            labelBgColor: '#FFFFFF',
            labelBgOpacity: 0.7,
            labelFontColor: '#666666'
          },
          markLine: {
            type: 'solid',
            dashLength: 4,
            data: []
          }
        }
      }
    }
  },
  mounted() {
    this.getServerData()
  },
  methods: {
    getServerData() {
      getHomePageListApi().then(res => {
        const { constructionLine, infrastructureSubstation, productionLine, productionSubstation, network, other } =
          res.data.proMsgBean
        setTimeout(() => {
          let data = {
            categories: ['基建线路', '基建变电', '生产线路', '生成变电', '配网', '其他'],
            series: [
              {
                name: '',
                data: [constructionLine, infrastructureSubstation, productionLine, productionSubstation, network, other]
              }
            ]
          }
          this.chartData = JSON.parse(JSON.stringify(data))
        }, 500)
      })
    },
    handleChartClick(index) {
      // console.log('index', index)
      const currentIndex = index.currentIndex.index // 获取当前点击的图表索引
      const currenName = this.chartData.categories[currentIndex]
      console.log('currenName选中的工程类型', currenName)
      uni.navigateTo({ url: `/pages/realName/index/pages/project?xxx=${currenName}` })
    }
  }
}
</script>

<style scoped>
.charts-container {
  width: 100%;
  height: 100%;
}
</style>