<script setup lang="ts">
import { BarChart, PieChart, LineChart } 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,
  LineChart,
  CanvasRenderer,
])

const option = ref({
  grid: { left: 0, right: 0, top: 0, bottom: 0, containLabel: true },
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(0,0,0,0.8)',
    borderColor: '#fff',
    textStyle: { color: '#fff' },
    formatter: '{b}: {c}',
    // position: 'top',
    distance: 0,
    //   extraCssText: 'transform: translateY(-8px);'
  },
  xAxis: {
    type: 'category',
    data: ['10-05', '10-12', '10-19', '10-26', '11-02', '11-09'],
    axisLine: { show: false },
    axisTick: { show: false },
    splitLine: { show: false },
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'line',
      data: [150, 230, 224, 218, 135, 147],
      lineStyle: {
        // 线条样式
        color: '#215ACD',
        width: 5,
        cap: 'round', // 线头圆角
        join: 'round', // 拐点圆角
      },
      symbolSize: 10, // 圆点加粗
    },
  ],
})
</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>
