import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import BgPie from '@/assets/images/bg-pie.png'

const axisLine = { show: true, lineStyle: { color: '#e4e6eb' } }
const axisLabel = { show: true, color: '#808696', fontSize: '16' }
const hidden = { show: false }
const pieBg = { image: BgPie, width: 191, height: 160}

export function useChart1() {
  const chartRef = ref()
  const option = ref<EChartsOption>({
    grid: { left: '40', top: '50', },

    height:'150px',
    tooltip: {
      trigger: 'axis',position: ['50%', '50%']
    },
    title: {
      subtext: '单位 千吨',
      textStyle:{
        fontSize:10,
      }
    },
    width:'100px',
    xAxis: {
      type: 'category',
      data: ['FY20', 'FY23', 'FY25'],
      axisLabel: {
        fontSize:10, // 设置字体大小
        // 其他 axisLabel 相关配置项...
      },
     
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 8, // 设置刻度值标签字体大小
        // 其他 axisLabel 相关配置项...
      },
    },
    series: [
      {
        barWidth:10,
        data: [{
          value:1968.325826,
          itemStyle:{
            color:{
               type: 'linear', // 设置为线性渐变
              x: 0, // 渐变起点的 x 坐标
              y: 0, // 渐变起点的 y 坐标
              x2: 0, // 渐变终点的 x 坐标
              y2: 1, // 渐变终点的 y 坐标
              colorStops: [
                {
                  offset: 0, // 渐变起点的位置，值范围 [0, 1]
                  color: '#2CACFC' // 渐变起点的颜色
                },
                {
                  offset: 1, // 渐变终点的位置，值范围 [0, 1]
                  color: '#B4E4EF' // 渐变终点的颜色
                }
              ]
            }
            
          }
        },
        {
          value:1089.509403,
          itemStyle:{
            color:{
               type: 'linear', // 设置为线性渐变
              x: 0, // 渐变起点的 x 坐标
              y: 0, // 渐变起点的 y 坐标
              x2: 0, // 渐变终点的 x 坐标
              y2: 1, // 渐变终点的 y 坐标
              colorStops: [
                {
                  offset: 0, // 渐变起点的位置，值范围 [0, 1]
                  color: '#2CACFC' // 渐变起点的颜色
                },
                {
                  offset: 1, // 渐变终点的位置，值范围 [0, 1]
                  color: '#B4E4EF' // 渐变终点的颜色
                }
              ]
            }
          }
        },
        {
          value:1377.82807,
          itemStyle:{
            color: 'rgba(0, 0, 0, 0)', // 设置透明颜色
            borderColor: '#6E7079', // 设置边框颜色
            borderWidth: 1, // 设置边框宽度
            borderType: 'dashed' // 设置边框为虚线样式
          }
        },
        ],
        type: 'bar',
      }
    ],

    graphic: {
      elements: [
        {
          type: 'line',
          x:50,
          y:130,
          shape: {
            x1: 0,
            y1: 0,
            x2: 90,
            y2: 1
          },
          z:100,
          style: {
            stroke: '#FF5733', // 虚线颜色
            lineWidth:1,
            
            lineDash: [8, 8] // 虚线样式
          },
          // position: ['5%', '30%']
        },
        {
          type: 'text',
          x:120,
          y:120,
          style: {
            text: '▲30%', // 标注文本内容
            fontSize:11,
            fill: '#FF5733'
          },
        },
        {
          type: 'line',
          x:50,
          y:110,
          shape: {
            x1: 0,
            y1: 0,
            x2: 90,
            y2: 1
          },
          z:100,
          style: {
            stroke: '#FF5733', // 虚线颜色
            lineWidth:1,
            
            lineDash: [8, 8] // 虚线样式
          },
          // position: ['5%', '30%']
        },
        {
          type: 'text',
          x:120,
          y:100,
          style: {
            text: '▲15%', // 标注文本内容
            fontSize:11,
            fill: '#FF5733'
          },
        },
        {
          type: 'text',
          x:45,
          y:50,
          z:200,
          style: {
            text: 'base', // 标注文本内容
            fontSize:12,
            fill: '#18B1FD',
           
          },
        }
      ]
    },
  })

  return { chartRef, option }
}

export function useChart12() {
  const chartRef = ref()
  const timeNow = useDateFormat(useNow(), 'YYYY-MM-DD hh:mm')

  const commonLine: any = { type: 'line', smooth: true, symbol: 'none', seriesLayoutBy: 'row', areaStyle: {} }

  const option = ref<EChartsOption>({
    grid: { left: '20', top: 120, right: 30, bottom: '20', containLabel: true },
    legend: {
      type: 'scroll',
      // data: ['铜', '铝', '铅', '锌', '线材', '不锈钢', '螺纹钢', '铁矿石'],
      data: ['铜', '铝'],
      selected: { 铜: true, 铝: false, 铅: false, 锌: false, 线材: false, 不锈钢: false, 螺纹钢: false, 铁矿石: false },
      align: 'left',
      left: 20,
      selectedMode: 'single',
      textStyle: { fontSize: 16 },
    },
    title: [
      { text: '铜 Cu', left: 20, top: 30, textAlign: 'left', textStyle: { color: '#142142', fontSize: 20, fontWeight: 500 } },
      { text: '69760.00', left: 20, top: 55, textAlign: 'left', textStyle: { color: '#002fa7', fontSize: 30, fontWeight: 500 } },
      { text: '1260.00', left: 180, top: 63, textAlign: 'left', textStyle: { color: '#808696', fontSize: 20, fontWeight: 500 } },
      { text: '1.84%', left: 300, top: 63, textAlign: 'left', textStyle: { color: '#808696', fontSize: 20, fontWeight: 500 } },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      textStyle: { color: '#fff', fontSize: 14 },
      className: 'tooltip',
      order: 'seriesDesc',
      renderMode: 'html',
      backgroundColor: '#1b366a', // 设置背景颜色
      borderColor: '#1b366a', // 边框颜色
      formatter: (params: any) => {
        return `
             ${timeNow.value}  <br/>
             ${params[0].marker}
             沪${params[0].seriesName}主力 :
             ${params[0].value == 0 ? '-' : Number(params[0].value).toLocaleString()}k`
      },
    },
    xAxis: {
      type: 'category',
      gridIndex: 0,
      // boundaryGap: false,
      axisTick: hidden,
      axisLabel,
      axisLine,
      // prettier-ignore
      data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45',],
    },
    yAxis: {
      gridIndex: 0,
      max: 100,
      axisLine,
      axisTick: hidden,
      axisLabel: { show: true, color: '#808696', fontSize: '16', formatter: '{value}k' },
      splitLine: hidden,
    },
    series: [
      {
        // prettier-ignore
        data: [40.14, 25.44, 26.4, 58.64, 27.4, 30.4, 55.4, 80.4, 40.86, 39.4, 38.54, 59.4, 40.62, 50.4, 60.4, 75.56, 80.12, 70.4, 60.4, 40],
        name: '铜',
        ...commonLine,
        // lineStyle: { color: '#002fa7', width: 3, type: 'solid' },
        // areaStyle: {
        //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        //     { offset: 0, color: 'rgba(29,177,247,0.2)' },
        //     { offset: 1, color: 'rgba(29,177,247,0.5)' },
        //   ]),
        // },
        // markArea: {
        //   itemStyle: { color: 'rgba(0, 47, 167, 0.06)' },
        //   data: [[{ xAxis: '07:30' }, { xAxis: '10:00' }]],
        // },
      },
      {
        // prettier-ignore
        data: [30.14, 58.64, 25.44,  40.86, 27.4, 30.4, 55.4, 50.4, 75.56, 80.12, 39.4, 38.54, 39.4, 40.62, 50.4, 60.4,26.4, 70.4, 60.4, 40],
        name: '铝',
        ...commonLine,
      },
      {
        // prettier-ignore
        data: [30.14, 58.64, 25.44,  80.12, 70.4,  40.86, 40.62, 50.4, 60.4,26.4, 27.4, 30.4, 39.4, 38.54, 39.4, 55.4, 50.4, 75.56,60.4, 40],
        name: '铅',
        ...commonLine,
      },
      {
        // prettier-ignore
        data: [55.4, 50.4, 75.56,30.14, 58.64, 50.4, 60.4,26.4, 27.4, 30.4,  80.12,  25.44,  40.86, 39.4, 38.54, 39.4, 40.62,70.4, 60.4, 40],
        name: '锌',
        ...commonLine,
      },
      {
        // prettier-ignore
        data: [ 25.44,  60.4,26.4, 27.4, 30.4, 55.4, 50.4, 75.56, 80.12, 70.4,40.86, 39.4,30.14, 58.64, 38.54, 39.4, 40.62, 50.4,  60.4, 40],
        name: '线材',
        ...commonLine,
      },
      {
        // prettier-ignore
        data: [30.14, 58.64, 25.44,  40.86, 39.4, 38.54, 39.4, 55.4, 50.4, 75.56, 80.12, 70.4, 60.4,60.4,26.4, 27.4,  40, 40.62, 50.4, 30.4],
        name: '不锈钢',
        ...commonLine,
      },
      {
        // prettier-ignore
        data: [30.14, 58.64, 25.44,  40.86,27.4, 30.4, 55.4, 50.4, 75.56, 39.4, 38.54, 39.4, 40.62, 50.4, 60.4,26.4,  80.12, 70.4, 60.4, 40],
        name: '螺纹钢',
        ...commonLine,
      },
      {
        // prettier-ignore
        data: [30.14, 58.64, 25.44,  40.86, 39.4,  27.4, 30.4, 55.4, 50.4, 70.4, 60.4, 75.56,38.54, 39.4, 40.62, 50.4, 60.4,26.4, 80.12, 40],
        name: '铁矿石',
        ...commonLine,
      },
    ],
  })

  return { chartRef, option }
}

export function useChart2() {
  const chartRef = ref()
  const option = ref<EChartsOption>({
    grid: { left: '20', top: '0', right: '70', bottom: '20', containLabel: true },
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    xAxis: { type: 'value', axisLabel: hidden, splitLine: hidden },
    yAxis: {
      type: 'category',
      // 轴线
      axisLine: { show: true, lineStyle: { color: '#e4e6eb' } },
      // 刻度线
      axisTick: hidden,
      // 刻度标签
      axisLabel,
      // 区域中的分隔线
      splitLine: hidden,
      data: ['现实点交付情况', 'CD Theane实绩', '年度交涉目标', '差别化部材探索', '企业碳中和', '业务线上推进'],
    },
    series: [
      {
        data: [16, 24, 32, 46, 60, 80],
        type: 'bar',
        barWidth: 26,
        // 图形上的文本标签
        label: { show: true, position: 'right', distance: 12, formatter: '{c}%', color: '#002fa7', fontSize: 22 },
        itemStyle: {
          borderRadius: 6,
          // // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#bfdff7' },
            { offset: 0.7, color: '#849ddb' },
            { offset: 1, color: '#3a63cb' },
          ]),
        },
      },
    ],
  })

  return { chartRef, option }
}
const state = reactive({
  title: 'quanbu'
})

export function useChart21() {
  const contData = {
    "yuancailiao":{
      titlee:'原材料',
      datt1:[483.79, 85.59,284.23],
      datt2:[1.06,7.48,99.64],
      nameDatr:['鼎胜(铝)', '金田(铜)', '东阳光(冷媒)'],
      size:12,
      withs:12,
      flg:true
      },
      "jiagongping":{
        titlee:'加工品',
        datt1:[2.78,98.57,3.77,16.97],
        datt2:[1.32,6.14,1.06,3.38],
        nameDatr:['广隆(配管)','槎南(钣金)','日清纺(树脂部品)','康谷(EPS)'],
        size:12,
        withs:12,
        flg:true
      },
      "jineng":{
        titlee:'机能部品',
        datt1:[24.13,4.22,3.85],
        datt2:[87.50,1.22,8.66],
        nameDatr:['卧龙(送风机)','千代田(冷媒循环)','坚田(P板)'],
        size:12,
        withs:12,
        flg:true
      },
      "quanbu":{
        datt1:[483.79, 85.59,284.23,16.97,3.77,98.57,2.781,24.13,4.22,3.85],
        datt2:[1.06,7.48,99.64,3.38,1.06,6.14,1.32,57.5,1.22,8.66],
        nameDatr:['鼎胜', '金田', '东阳光','康谷','日清纺','槎南','广隆','卧龙','千代田','坚田'],
        titles:'原材料',
        size:8,
        withs:4,
        flg:false
      }
  }
  
  const chartRef = ref()
  const optionRef = ref()

  let datt1= [483.79, 85.59,284.23,16.97,3.77,98.57,2.781,24.13,4.22,3.85]
  let datt2=[1.06,7.48,99.64,3.38,1.06,6.14,1.32,57.5,1.22,8.66]
  let nameDatr=['鼎胜', '金田', '东阳光','康谷','日清纺','槎南','广隆','卧龙','千代田','坚田']

  // console.log(thisOptData.value.title,99999999999)
  let withs = 4
  let size = 8
  let titles = '原材料'
  let flg =false
 function getDta(){ 
  const option ={
    title:[{
      text: titles,
      textStyle:{
        fontSize:'12px',
        color:'#004ADB',
      },
      left:'50%',
      top:0,
     
    },
    {
      text: '单位 千吨',
      textStyle:{
        fontSize:10,
      },
      left:20,
      bottom:65
     
    },
  ],
    
    width:'218px',
    height:'180px',
 
    grid: { left: '20', top: '5', right: '0', bottom: '0', containLabel: true },
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    xAxis: { type: 'value', splitLine: hidden,show:true,axisLabel: {
      margin: 5, // 设置标签与图形之间的距离
    }, },
    legend: {
      // top:20,
      bottom:65,
      left:85,
      align:'left',
      textStyle:{
        fontSize:10
      },
      itemWidth:8,
      itemHeight:8
    },
    yAxis: {
      type: 'category',
      // 轴线
      axisLine: { show: true, lineStyle: { color: '#e4e6eb' } },
      // 刻度线
      // axisTick: hidden,
      // 刻度标签
      // 区域中的分隔线
      splitLine: hidden,
      data:nameDatr,
      axisLabel:{fontSize:8,color:'#000'},
      // top:50,
    },
    series: [
      {
        data: datt1,
        name: 'FY20碳排放数据',
        type: 'bar',
        barWidth: withs,
        // 图形上的文本标签
        label: { show: flg, position: 'right', distance: 8, color: '#002fa7', fontSize: size},
        itemStyle: {
          borderRadius: size,
          // // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          color: '#428EF6',
        },
      },
      {
        data: datt2,
        type: 'bar',
        name:'FY23碳排放数据',
        barWidth: withs,
        // 图形上的文本标签
        label: { show:flg, position: 'right', distance: 12, color: '#002fa7', fontSize:size },
        itemStyle: {
          borderRadius: size,
          // // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          color:'#41BFC5' ,
        },
      },
    ],
  }
  optionRef.value = option
}
  const ss = computed(() => [state.title])
  watch(() => unref(ss),
    async (v) => {
      console.log(state.title)
      titles   = contData[state.title].titlee
      datt1   = contData[state.title].datt1
      datt2   = contData[state.title].datt2
      nameDatr   = contData[state.title].nameDatr
      withs = contData[state.title].withs
      size = contData[state.title].size
      flg =  contData[state.title].flg
      getDta()
  
    },
    { immediate: true, deep: true },
  )
  
  return { chartRef, option:optionRef, state }
}



export function useChart23() {
  const chartRef = ref()
  const option = ref<EChartsOption>({
    title: {
      text: '加工品',
      textStyle:{
        fontSize:'12px',
        color:'#004ADB',
      },
      left:'50%',
      top:40,
     
    },
    width:'220px',
    height:'150px',
 
    grid: { left: '20', top: '70', right: '0', bottom: '0', containLabel: true },
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    xAxis: { type: 'value', splitLine: hidden,show:true,axisLabel: {
      margin:0, // 设置标签与图形之间的距离
    }, position:'top'},
    legend: {
   bottom:20,
      left:55,
      align:'left',
      textStyle:{
        fontSize:10
      },
      itemWidth:8,
      itemHeight:8
    },
    yAxis: {
      type: 'category',
      // 轴线
      axisLine: { show: true, lineStyle: { color: '#e4e6eb' } },
      // 刻度线
      // axisTick: hidden,
      // 刻度标签
      // 区域中的分隔线
      splitLine: hidden,
      data: ['广隆(配管)', '槎南(钣金)', '日清纺(树脂部品)'],
      axisLabel:{fontSize:12,color:'#000'},
      // top:50,
    },
    series: [
      {
        data: [483.79, 85.59,284.23],
        name: 'FY20碳排放数据',
        type: 'bar',
        barWidth: 12,
        // 图形上的文本标签
        label: { show: true, position: 'right', distance: 12, color: '#002fa7', fontSize: 12 },
        itemStyle: {
          borderRadius: 6,
          // // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          color: '#369BF8',
        },
      },
      {
        data: [1.06,7.48,99.64],
        type: 'bar',
        name:'FY23碳排放数据',
        barWidth: 12,
        // 图形上的文本标签
        label: { show: true, position: 'right', distance: 12, color: '#002fa7', fontSize: 12 },
        itemStyle: {
          borderRadius: 6,
          // // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          color:'#00C4BD' ,
        },
      },
    ],
  })

  return { chartRef, option }
}


export function useChart22() {
  const chartRef = ref()
  const option = ref<EChartsOption>({
    title: {
      text: '原材料',
      textStyle:{
        fontSize:'12px',
        color:'#004ADB',
      },
      left:'50%',
      top:40,
     
    },
    width:'220px',
    height:'150px',
 
    grid: { left: '20', top: '70', right: '0', bottom: '0', containLabel: true },
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    xAxis: { type: 'value', splitLine: hidden,show:true,axisLabel: {
      margin:0, // 设置标签与图形之间的距离
    }, position:'top'},
    legend: {
   bottom:20,
      left:55,
      align:'left',
      textStyle:{
        fontSize:10
      },
      itemWidth:8,
      itemHeight:8
    },
    yAxis: {
      type: 'category',
      // 轴线
      axisLine: { show: true, lineStyle: { color: '#e4e6eb' } },
      // 刻度线
      // axisTick: hidden,
      // 刻度标签
      // 区域中的分隔线
      splitLine: hidden,
      data: ['鼎胜(铝)', '金田(铜)', '东阳光(冷媒)'],
      axisLabel:{fontSize:12,color:'#000'},
      // top:50,
    },
    series: [
      {
        data: [483.79, 85.59,284.23],
        name: 'FY20碳排放数据',
        type: 'bar',
        barWidth: 12,
        // 图形上的文本标签
        label: { show: true, position: 'right', distance: 12, color: '#002fa7', fontSize: 12 },
        itemStyle: {
          borderRadius: 6,
          // // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          color: '#369BF8',
        },
      },
      {
        data: [1.06,7.48,99.64],
        type: 'bar',
        name:'FY23碳排放数据',
        barWidth: 12,
        // 图形上的文本标签
        label: { show: true, position: 'right', distance: 12, color: '#002fa7', fontSize: 12 },
        itemStyle: {
          borderRadius: 6,
          // // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          color:'#00C4BD' ,
        },
      },
    ],
  })

  return { chartRef, option }
}

export function useChart3() {
  const chartRef = ref()
  const option = ref<EChartsOption>({
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    grid: [
      { top: '60%', width: '45%', bottom: 14, left: 14, containLabel: true },
      { top: '60%', width: '45%', bottom: 14, right: 14, containLabel: true },
    ],
    xAxis: [
      {
        gridIndex: 0,
        type: 'category',
        splitLine: hidden,
        axisTick: hidden,
        axisLabel: { show: true, color: '#808696', fontSize: 12 },
        axisLine,
        data: ['0313', '0314', '0315', '0316'],
        boundaryGap: false,
      },
      {
        gridIndex: 1,
        type: 'category',
        splitLine: hidden,
        axisTick: hidden,
        axisLabel: { show: true, color: '#808696', fontSize: 12 },
        axisLine,
        data: ['0313', '0314', '0315', '0316'],
      },
    ],
    yAxis: [
      {
        gridIndex: 0,
        type: 'value',
        max: 100,
        axisLine,
        axisTick: hidden,
        axisLabel: { show: true, color: '#808696', fontSize: 12 },
        splitLine: hidden,
      },
      {
        gridIndex: 1,
        type: 'value',
        max: 100,
        axisLine,
        axisTick: hidden,
        axisLabel: { show: true, color: '#808696', fontSize: 12 },
        splitLine: hidden,
      },
    ],
    title: [
      { text: 'CD数据', left: 8, top: '50%', textAlign: 'left', textStyle: { color: '#142142', fontSize: 16, fontWeight: 500 } },
      { text: 'THEME件数', left: '50%', top: '50%', textAlign: 'left', textStyle: { color: '#142142', fontSize: 16, fontWeight: 500 } },
    ],
    graphic: {
      elements: [
        { type: 'image', left: 25, top: -5, style: pieBg },
        { type: 'image', right: 26, top: -5, style: pieBg },
      ],
    },
    series: [
      { type: 'line', smooth: true, data: [32, 21, 75, 57] },
      { type: 'line', smooth: true, data: [12, 31, 35, 47] },
      {
        xAxisIndex: 1,
        yAxisIndex: 1,
        type: 'bar',
        data: [12, 31, 35, 47],
        showBackground: true,
        backgroundStyle: { color: '#f4f6fa' },
        itemStyle: {
          borderRadius: 2,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#70b8f0' },
            { offset: 1, color: '#2b7ff9' },
          ]),
        },
      },
      {
        xAxisIndex: 1,
        yAxisIndex: 1,
        type: 'bar',
        data: [32, 75, 57, 21],
        showBackground: true,
        backgroundStyle: { color: '#f4f6fa' },
        itemStyle: {
          borderRadius: 2,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: '#34a5d9' },
            { offset: 1, color: '#23d2c5' },
          ]),
        },
      },
      {
        id: 'pie1',
        type: 'pie',
        center: ['25.6%', '27.4%'],
        radius: ['38.8%', '48.8%'],
        avoidLabelOverlap: true,
        label: {
          show: false,
          position: 'center',
          color: '#2bbdce',
          formatter: '{count|{d}}{unit|%}',
          overflow: 'truncate',
          rich: { count: { fontSize: 24 }, unit: { fontSize: 14, verticalAlign: 'bottom' } },
        },
        itemStyle: { borderColor: '#fff', borderWidth: 2 },
        emphasis: { label: { show: true }, scaleSize: 10, focus: 'series' },
        data: [
          { name: '数据1', value: 33.2 },
          { name: '数据2', value: 28.6 },
          { name: '数据3', value: 41.9 },
          { name: '数据4', value: 78.2 },
        ],
      },
      {
        id: 'pie2',
        type: 'pie',
        center: ['75.5%', '27.8%'],
        radius: ['38.8%', '47.8%'],
        avoidLabelOverlap: true,
        label: {
          show: false,
          position: 'center',
          color: '#002fa7',
          formatter: '{count|{c}}{unit|件}',
          rich: { count: { fontSize: 24 }, unit: { fontSize: 14, verticalAlign: 'bottom' } },
        },
        itemStyle: { borderColor: '#fff', borderWidth: 2 },
        emphasis: { label: { show: true }, scaleSize: 10, focus: 'series' },
        data: [
          { name: '物品1', value: 33 },
          { name: '物品2', value: 128 },
          { name: '物品3', value: 41 },
          { name: '物品4', value: 78 },
        ],
      },
    ],
  })
  onMounted(async () => {
    await nextTick()
    const chart = unref(chartRef)?.chart
    if (!chart?.dispatchAction) return
    const activeIndex: any = { pie1: 3, pie2: 3 }
    Object.keys(activeIndex).forEach((i) => {
      chart.dispatchAction({ type: 'highlight', seriesId: i, dataIndex: activeIndex[i] })
    })
    chart.on('mouseover', ({ seriesId, dataIndex }: any) => {
      if (!seriesId || activeIndex[seriesId] == dataIndex) return
      chart.dispatchAction({ type: 'downplay', seriesId, dataIndex: activeIndex[seriesId] })
    })

    //当鼠标离开时，把当前项置为选中
    chart.on('mouseout', ({ seriesId, dataIndex }: any) => {
      if (!seriesId) return

      activeIndex[seriesId] = dataIndex
      chart.dispatchAction({ type: 'highlight', seriesId, dataIndex })
    })
  })

  return { chartRef, option }
}