<template>
  <div class="round">
    <div ref="chartDom2" class="pie"></div>
  </div>
</template>
<style scoped lang="scss">
.round {
  display: flex;
  justify-content: space-between;
  height: 300px;
  width: 100%;
  .pie {
    width: 100%;
  }
}
</style>
<script setup>
import * as echarts from 'echarts'
const chartDom2 = ref()
onMounted(() => {
  chartDomAvitve()
})
function chartDomAvitve() {
  const myChart1 = echarts.init(chartDom2.value)
  const option1 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: [
        '吉林市',
        '长春市',
        '榆树市',
        '通化市',
        '白山市',
        '辽源市',
        '松原市',
        '白城市',
        '四平市',
        '梅河口市'
      ]
    },
    series: [
      {
        type: 'bar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 渐变方向：从上到下
            [
              { offset: 0, color: '#83bff6' }, // 柱图顶部颜色
              { offset: 0.5, color: '#188df0' }, // 柱图中间颜色
              { offset: 1, color: '#188df0' } // 柱图底部颜色
            ]
          )
        },
        data: [69325, 73438, 81000, 91594, 184141, 291807, 321594, 434141, 589007, 689007]
      }
    ]
  }
  myChart1.setOption(option1)
  window.addEventListener('resize', function () {
    myChart1.resize()
  })
}
</script>
