<template>
  <view class="w-full h-full">
    <echart ref="chartRef"></echart>
  </view>
</template>

<script setup>
import echart from './echart.vue';
// #ifdef MP-WEIXIN
const echarts = require('../../static/echarts.min.js')
// #endif
// #ifdef H5
import * as echarts from 'echarts'
// #endif
const props = defineProps({
  option: {
    type: Object,
    default: () => ({}),
  },
})
watch(() => props.option, (newVal) => {
  init();
}, {
  deep: true,
})
const chartRef = ref();
const isInit = ref(false);
const init = () => {
  if (isInit.value) {
    chartRef.value.chart.dispatchAction({
      type: 'hideTip'
    });
    chartRef.value.chart.setOption(props.option)
    return;
  }
  chartRef.value.init(echarts, (chart) => {
    chart.setOption(props.option)
    isInit.value = true;
    // 监听tooltip显示事件
    chart.on('showTip', (params) => { })
    chart.on('hideTip', (params) => { })
  })
}

const save = () => {
  chartRef.value.chart.canvasToTempFilePath({
    success(res) {
      console.log('res::::', res)
    },
  })
}

onMounted(() => {
  setTimeout(() => {
    init();
  }, 100);
});

</script>
<style>
.customTooltips {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20rpx;
}
</style>
