LinYeFangHuo/src/packages/components/Units/Titles/RightBox03/index.vue

<template>
  <div class="go-title-03">
    <div class="btnsbox">
      <div class="pos-r">
        <img class="img" src="@/assets/images/chart/units/titlesbg01.png" />
        <div class="container">
          <div v-for="(item,index) in textBtnArr" @click="btnClick(item,index)" class="li" :class="btnIndex==index?'active':''">{{item.label}}</div>
        </div>
      </div> 
    </div>
    <div class="chartsbox">
      <v-chart ref="vChartRefRight" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { reactive, watch, PropType, toRefs, ref, onMounted } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { isPreview, colorGradientCustomMerge} from '@/utils'
import axios from 'axios'
import { getAppEnvConfig } from '@/utils/env'
var { VITE_GLOB_API_URL } = getAppEnvConfig();

const props = defineProps({
  themeSetting: {
    type: Object,
    required: true
  },
  themeColor: {
    type: Object,
    required: true
  },
  chartConfig: {
    type: Object as PropType<config>,
    required: true
  }
})
const {
  textBtnArr
} = toRefs(props.chartConfig.option)
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)

use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
const chartEditStoreRight = useChartEditStore()

const option = reactive({
  value: {}
})

// 渐变色处理
watch(
  () => chartEditStoreRight.getEditCanvasConfig.chartThemeColor,
  (newColor: keyof typeof chartColorsSearch) => {
    try {
      if (!isPreview()) {       
          props.chartConfig.option.color = []
          props.chartConfig.option.series.forEach((value: any, index: number) => {
            props.chartConfig.option.color.push(value.lineStyle.color)
            value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: value.lineStyle.color
              },
              {
                offset: 1,
                color: 'rgba(0,0,0, 0)'
              }
            ])
          })
        }
        option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
        props.chartConfig.option = option.value
    } catch (error) {
      console.log(error)
    }
  },
  {
    immediate: true
  }
)

watch(
  () => props.chartConfig.option.dataset,
  () => {
    option.value = props.chartConfig.option
  }
)
const btnIndex = ref(0)
const btnClick = function(item,index){
  btnIndex.value = index
  getListData()
}
const getListData=()=>{
  axios({
      method: "get",
      url: VITE_GLOB_API_URL + '/api/FireManagement/GetFireClueStatisticsByState',
      params: {
        type: textBtnArr.value[btnIndex.value].value,
      },
      headers: {
          'X-Token': localStorage.getItem("X-Token")
      }
  }).then(res => {
      let arr = []
      res.data.result.forEach(item =>{
        arr.push({
          product: item.dateTime,
          data1: item.untreatedCount,
          data1: item.treatedCount
        })
      })
      props.chartConfig.option.dataset.source = arr
  })
}
onMounted(() => {
  getListData()
})
</script>
<style lang="scss" scoped>
@include go('title-03') {
  position: relative;
  .btnsbox{
    position: absolute;
    left: 0;top: 0;
    width: 146px;
    height: 30px;
    z-index: 9;
    .pos-r{
      position: relative;
      width: 146px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center; 
      img{
        position: absolute;
        width: 146px;
        height: 30px;
      }
      .container{
        width: 92%;
        height: 60%;
        border-radius: 10px;
        display: flex;
        position: absolute;
        z-index: 9;
        .li{
          flex: 1;
          color: #099860;
          font-size: 14px;
          background: none;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
        .active{
          background: #099860;
          color: #fff;
          border-radius: 5px;
        }
      }
    }
  }
  .chartsbox{
    width: 100%;
    height: 100%;
  }
}
</style>