<script setup lang="ts">
import { BarChart, PieChart } from 'echarts/charts'
import {
  DatasetComponent,
  LegendComponent,
  TooltipComponent,
  GridComponent,
} from 'echarts/components'
import * as echarts from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import UniEcharts from 'uni-echarts'
import { provideEchartsTheme } from 'uni-echarts/shared'
// 🚨 注意：必须调用 provideEcharts 才能正常运行
// provideEcharts(echarts)
// 🤩 自 2.0.0 开始，通过配置 Vite 插件可以省略上述 provideEcharts 的调用

// 此处仅用于演示通过 provide 修改图表 theme 的方式，不是必须的
// provideEchartsTheme('dark')
// const createEcharts = () => echarts
echarts.use([
  GridComponent,
  LegendComponent,
  TooltipComponent,
  DatasetComponent,
  PieChart,
  BarChart,
  CanvasRenderer,
])

const option = ref({
  grid: { left: 0, right: 0, top: 0, bottom: 0, containLabel: true },
  yAxis: {
    type: 'category',
    data: ['授权点击率', '已阅比例', '任务得分', '完成率'],
    axisLine: { show: false },
    axisTick: { show: false },
    splitLine: { show: false },
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      formatter: (v: number) => {
        return ['差', '一般', '良好', '优异'][v]
      },
    },
  },
  series: [
    {
      type: 'bar',
      data: [3, 2, 1, 2],
      barHeight: '48rpx',
      itemStyle: {
        borderRadius: [8],
        color: ({ name }) => {
          const mapcolor = {
            完成率: '#215ACD',
            任务得分: '#EB5E12',
            已阅比例: '#215ACD',
            授权点击率: '#215ACD',
          }
          return mapcolor[name]
        },
      },
    },
  ],
})
</script>
<template>
  <view>
    <uni-echarts custom-class="chart" :option="option"></uni-echarts>
  </view>
</template>
<style scoped lang="scss">
.chart {
  //   width: 100%;
  height: 600rpx;
  //   border: 1px solid red;
}
</style>
