<template>
  <view style="width:100%; height: 1000rpx; background:#FFFFFF;">
    <view style="width:100%; height: 800rpx;">
      <l-echart ref="chart"></l-echart>
    </view>
  </view>
</template>

<script>
import * as echarts from 'echarts';
import LEchart from "../../uni_modules/lime-echart/components/l-echart/l-echart.vue";

export default {
  components: { LEchart },
  data() {
    return {
      option: {
        title: {
          text: 'Stacked Line',
          x: 'center',
          textStyle: {
            fontSize: 16,
            color: '#333'
          },
          padding: [10, 0, 10, 0] // 预留标题上下间距，避免与图例冲突
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['价格', '数量'],
          orient: 'horizontal',
          bottom: '10%',
          padding: [10, 20, 20, 20],
          itemGap: 20,
          textStyle: {
            fontSize: 24,
            color: '#333'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '15%',
          bottom: '30%', // 增大底部预留空间
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            fontSize: 12
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '价格',
            position: 'left',
            alignTicks: true,
            axisLine: {
              lineStyle: {
                color: '#c23531'
              }
            },
            axisLabel: {
              formatter: '{value} 元',
              fontSize: 12
            }
          },
          {
            type: 'value',
            name: '数量',
            position: 'right',
            alignTicks: true,
            axisLine: {
              lineStyle: {
                color: '#2f4554'
              }
            },
            axisLabel: {
              formatter: '{value} 件',
              fontSize: 12
            }
          }
        ],
        dataZoom: [{}],
        series: [
          {
            name: '价格',
            type: 'line',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            yAxisIndex: 0,
            smooth: true,
            symbolSize: 6,
            itemStyle: { color: '#c23531' },
            lineStyle: { width: 2 }
          },
          {
            name: '数量',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210],
            yAxisIndex: 1,
            smooth: true,
            symbolSize: 6,
            itemStyle: { color: '#2f4554' },
            lineStyle: { width: 2 }
          }
        ],
        color: ['#c23531', '#2f4554']
      }
    };
  },
  mounted() {
    this.$refs.chart.init(echarts, chart => {
      chart.setOption(this.option);
    });
  }
};
</script>
