<template>
  <div class="custom-echarts">
    <div id="myEcharts" class="myChart"></div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

//初始化eCharts
const initEcharts = () => {
  // 基于准备好的dom，初始化echarts实例
  var myCharts = echarts.init(document.getElementById('myEcharts'))
  // 绘制图表
  myCharts.setOption({
    title: {
      text: 'FiEE, Inc. Stock Price History',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        snap: true,
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: function (params) {
        const p = params[0];
        return `${p.axisValue}<br/>Price: ${p.data}`;
      }
    },
    xAxis: {
      data: ['2013', '2015', '2017', '2019', '2021', '2023', '2025'],
      type: 'category',
      boundaryGap: false,
    },
    yAxis: {
      type: 'value',
      position: 'right',
      interval: 25,
      max: 75.0,
      show: true,
    },
    series: [
      {
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20],
        symbol: 'none',
        lineStyle: {
            color: '#2c6288'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#2c6288'
              },
              {
                offset: 1,
                color: '#F4F6F8'
              }
            ]
          },
        },
      },
    ],

    dataZoom: [
      {
        type: 'inside',
      },
      {
        type: 'slider',
        show: true,
        dataBackground: {
          lineStyle: {
            color: '#2C6288'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 1, color: '#2c6288' },
                { offset: 0, color: '#F4F6F8' }
              ]
            }
          }
        },
        selectedDataBackground: {
          lineStyle: {
            color: '#2C6288'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 1, color: '#2c6288' },
                { offset: 0, color: '#F4F6F8' }
              ]
            }
          }
        },
        fillerColor: 'rgba(44, 98, 136, 0.3)',
        realtime: false,
      },
    ],
  })
}

onMounted(() => {
  initEcharts()
})
</script>
<style lang="scss" scoped>
.custom-echarts {
  .myChart {
    width: 1000px;
    height: 400px;
  }
}
</style>
