<template>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <!--vue3中 id=‘’ 变更 ref=-->
  <div ref="chart" style="width:100%;height:200px;"></div>
</template>

<script setup >
import {onMounted, reactive, ref} from "vue";
// 局部引入echarts核心模块
import * as echarts from 'echarts'

// const props = defineProps({ // 宏接收：父传参
// 结构优化
const {chartType,chartData}= defineProps({ // 宏接收：父传参
  chartType:{
      type: String
  },
  chartData: {
      type: Array
  }
})

const chart =ref(); // 创建DOM引用

// 第二种方法：初始化方法
const option = reactive({
  // 指定图表的配置项和数据
  title: { // 标题
      // left: 'center', // 居中
      text: 'ECharts 入门示例',
      left: 'center',
      textStyle: {
          color: '#f60',
          fontSize: 20,
      }
  },
  color: '#f00', // 系列柱的颜色
  tooltip: {},  // 提示
  legend: {  // 图例
      data: ['销量'],
      top: '5%',
      left: 'right',
      textStyle: { // 文字样式
          color: '#f68',
      }
  },
  xAxis: { // x轴
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      axisLine: { // 设置轴
          lineStyle: { // 样式
              color:'#000' // 颜色
          }
      },

      axisLabel:{
          interval: 0,
          formatter: value => value.split('').join('\n') //报红：取消lang='ts'
      }
  },
  yAxis: { // y轴
      axisLine: { // 设置轴
          lineStyle: { // 样式
              color:'#000' // 颜色
          }
      },
      axisLabel:{
          // formatter: '{value} 件'
          formatter: function(value,index){ // 报红：取消lang='ts'
              return value %2 == 0 ? value + '件' : value  // 可写各种逻辑判断： 奇偶数
          }
      }
  },
  series: [ // data数据
      {
          name: '销量',
          // type: 'bar', // 图样类型
          // type: props.chartType, // 父传参：自定义
          type:chartType, // 结构优化
          // data: [5, 20, 36, 10, 10, 20], // 图标数据
          // data: props.chartData,
          data: chartData,
          label: {
              show: true,
              position: 'top'
          },
      }
  ]
})

// 使用生命钩子
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  // var myChart = echarts.init(document.getElementById('main'));
  // Vue3中： 需要引入
  var myChart = echarts.init(chart.value)

  // init(); // vue3.2没有this
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  // 单图表响应式: 跟随浏览器大小改变
  window.addEventListener('resize',()=>{
      myChart.resize()
  })

})

</script>

<style scoped>

</style>