yudao-web/src/views/Home/echarts-data.ts

import { EChartsOption } from 'echarts'



export const pieOptions: EChartsOption = {
  title: {
    text: '90%',
    subtext: '完成率',
    left: 'center',
    top: 'center',
    itemGap: 0,
    textStyle: {
      fontSize: 40,
      lineHeight: 40,
      padding: [0, 0, 0, 0],
      fontWeight: 'bold'
    },
    subtextStyle: {
      color: '#909399',
      fontSize: 18,
      lineHeight: 18,
      padding: [0, 0, 0, 0]
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  series: {
    type: 'pie',
    radius: ['60%', '80%'],
    center: ['50%', '50%'],
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 2
    },
    label: {
      formatter: (v) => {
        if (v.name) {
          return `{row|${v.name}} {v|${v.percent}%}  \n{hr|}`
        }
        return ''
      },
      padding: [0, 0, 15, 0],
      distanceToLabelLine: 0,
      rich: {
        row: {
          padding: [0, 0, 4, 5]
        },
        v: {
          color: '#409EFF',
          padding: [0, 0, 4, 0]
        },
        hr: {
          backgroundColor: '#409EFF',
          width: '100%',
          height: 1
        }
      }
    },
    labelLine: {
      length2: 0,
      lineStyle: {
        color: '#409EFF'
      }
    },
    roseType: 'radius',
    data: [
      { value: 335, name: '执法一队' },
      { value: 310, name: '执法二队' },
      { value: 234, name: '执法三队' },
      { value: 135, name: '执法四队' },
      { value: 1548, name: '执法五队' }
    ]
  }
}

export const barOptions: EChartsOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: 42,
    left: 16,
    right: 16,
    bottom: 16,
    containLabel: true
  },
  legend: {
    show: true,
    top: 16,
    left: 'center',
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      color: '#333'
    }
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#E5E7EB'
      }
    },
    axisLabel: {
      show: true,
      color: '#333'
    }
  },
  yAxis: {
    type: 'value',
    max: (v) => {
      return Math.floor(v.max * 1.2 + 1)
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#E5E7EB'
      }
    }
  },
  series: [
    {
      name: '执法记录',
      type: 'bar',
      barWidth: 20,
      stack: '执法记录',
      barGap: '30%',
      itemStyle: {
        color: 'rgba(64, 158, 255, .6)'
      },
      data: [70, 35, 70, 60, 20]
    },
    {
      name: '整改次数',
      type: 'bar',
      stack: '整改次数',
      barWidth: 20,
      itemStyle: {
        color: 'rgba(103, 194, 58, .6)'
      },
      data: [90, 45, 80, 50, 70]
    },
    {
      name: '执法记录',
      type: 'bar',
      barWidth: 20,
      stack: '执法记录',
      barGap: '30%',
      itemStyle: {
        color: 'rgba(64, 158, 255, 1)'
      },
      tooltip: {
        show: false
      },
      data: [2, 2, 2, 2, 2]
    },
    {
      name: '整改次数',
      type: 'bar',
      stack: '整改次数',
      barWidth: 20,
      itemStyle: {
        color: 'rgba(103, 194, 58, 1)'
      },
      tooltip: {
        show: false
      },
      data: [2, 2, 2, 2, 2]
    }
  ]
}

export const lineOptions: EChartsOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: 42,
    left: 16,
    right: 16,
    bottom: 16,
    containLabel: true
  },
  legend: {
    show: true,
    top: 16,
    left: 'center',
    textStyle: {
      color: '#333'
    }
  },
  xAxis: {
    type: 'category',
    data:[],
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#E5E7EB'
      }
    },
    axisLabel: {
      show: false,
      color: '#333'
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: false
    },
    max: (v) => {
      return Math.floor(v.max * 1.2 + 1)
    },
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#E5E7EB'
      }
    }
  },
  series: [
    {
      name: '任务数',
      data: [13253, 34235, 26321, 12340, 24643],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: 'rgba(64, 158, 255, 1)'
      },
      lineStyle: {
        color: 'rgba(64, 158, 255, 1)'
      },
      areaStyle: {
        color: 'rgba(64, 158, 255, .3)'
      }
    },
    {
      name: '执法数',
      data: [15678, 28943, 31452, 19876, 22345],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: 'rgba(103, 194, 58, 1)'
      },
      lineStyle: {
        color: 'rgba(103, 194, 58, 1)'
      },
      areaStyle: {
        color: 'rgba(103, 194, 58, .3)'
      }
    }
  ]
}