import useUserStore from '@/store/modules/user';
const pinias = useUserStore();

let optionChart = {
  // 柱状图+折线图
  option1: {
    color: pinias.$state.chartColor,
    // 显示暂无数据
    graphic: {
      type: 'text', // 类型：文本
      left: 'center',
      top: 'middle',
      silent: true, // 不响应事件
      invisible: false, // 有数据就隐藏
      style: {
        fill: '#c6c6c6',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '18px',
      },
    },
    tooltip: {
      trigger: 'axis',
      confine: true, //是否将 tooltip 框限制在图表的区域内
    },
    title: {
      left: 'left',
      text: '',
      top: 10,
      bottom: 10,
      left: 10,
      textStyle: {
        color: '#545E75', //字体颜色
        fontSize: 16, //字体大小
      },
    },
    grid: {
      left: '3%',
      right: '7%',
      top: '20%',
      bottom: '3%',
      containLabel: true,
    },
    legend: {
      top: '2%',
      orient: 'horizontal', //horizontal
      left: 'center', //left ,center
      textStyle: {
        color: 'inherit',
      },
    },
    xAxis: {
      type: 'category',
      data: ['2023', '2024', '2025'],
      axisLabel: {
        color: '#c6c6c6',
      },
      axisLine: {
        lineStyle: {
          color: '#066592',
        },
      },
    },
    yAxis: [
      {
        name: 'k㎡',
        type: 'value',
        nameLocation: 'end', // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: '#c6c6c6', //字体颜色
          fontSize: 12, //字体大小
          align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#066592',
          },
        },
        axisLabel: {
          color: '#c6c6c6',
        },
      },
      {
        name: '%',
        type: 'value',
        nameLocation: 'end', // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: '#c6c6c6', //字体颜色
          fontSize: 12, //字体大小
          align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        },
        axisLabel: {
          color: '#c6c6c6',
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#066592',
          },
        },
      },
    ],
    series: [
      {
        name: '面积',
        type: 'bar',
        barWidth: 16,
        yAxisIndex: 0,
        data: [24, 12, 9],
      },
      {
        name: '占建成区比例',
        type: 'line',
        smooth: true,
        yAxisIndex: 1,
        symbolSize: 8,
        data: [14, 8, 5],
      },
    ],
  },
  // 双Y轴柱状图
  option2: {
    color: pinias.$state.chartColor,
    // 显示暂无数据
    graphic: {
      type: 'text', // 类型：文本
      left: 'center',
      top: 'middle',
      silent: true, // 不响应事件
      invisible: false, // 有数据就隐藏
      style: {
        fill: '#c6c6c6',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '18px',
      },
    },
    tooltip: {
      trigger: 'axis',
      confine: true, //是否将 tooltip 框限制在图表的区域内
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '3%',
      right: '7%',
      top: '20%',
      bottom: '3%',
      containLabel: true,
    },
    legend: {
      top: '2%',
      orient: 'horizontal', //horizontal
      left: 'center', //left ,center
      textStyle: {
        color: 'inherit',
      },
    },
    xAxis: {
      type: 'category',
      data: ['2023', '2024', '2025'],
      axisLabel: {
        color: '#c6c6c6',
      },
      axisLine: {
        lineStyle: {
          color: '#066592',
        },
      },
    },
    yAxis: [
      {
        name: 'kg',
        type: 'value',
        nameLocation: 'end', // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: '#c6c6c6', //字体颜色
          fontSize: 12, //字体大小
          align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#066592',
          },
        },
        axisLabel: {
          color: '#c6c6c6',
        },
      },
      {
        name: 'm³',
        type: 'value',
        nameLocation: 'end', // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: '#c6c6c6', //字体颜色
          fontSize: 12, //字体大小
          align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        },
        axisLabel: {
          color: '#c6c6c6',
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#066592',
          },
        },
      },
    ],
    series: [
      {
        name: '溢流污染物总量(COD)',
        type: 'bar',
        barWidth: 20,
        yAxisIndex: 0,
        data: [12, 2, 9],
      },
      {
        name: '溢流量',
        type: 'bar',
        barWidth: 20,
        yAxisIndex: 1,
        data: [11, 23, 60],
      },
    ],
  },
  // 柱状图
  option3: {
    color: pinias.$state.chartColor,
    // 显示暂无数据
    graphic: {
      type: 'text', // 类型：文本
      left: 'center',
      top: 'middle',
      silent: true, // 不响应事件
      invisible: false, // 有数据就隐藏
      style: {
        fill: '#c6c6c6',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '18px',
      },
    },
    tooltip: {
      trigger: 'axis',
      confine: true, //是否将 tooltip 框限制在图表的区域内
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '3%',
      right: '7%',
      top: '20%',
      bottom: '3%',
      containLabel: true,
    },
    legend: {
      top: '2%',
      orient: 'horizontal', //horizontal
      left: 'center', //left ,center
      textStyle: {
        color: 'inherit',
      },
    },
    xAxis: {
      type: 'category',
      data: ['2023', '2024'],
      axisLabel: {
        color: '#c6c6c6',
      },
      axisLine: {
        lineStyle: {
          color: '#066592',
        },
      },
    },
    yAxis: {
      name: 't',
      type: 'value',
      nameLocation: 'end', // 坐标轴名称显示位置
      nameGap: 15, // 坐标轴名称与轴线之间的距离
      nameTextStyle: {
        color: '#c6c6c6', //字体颜色
        fontSize: 12, //字体大小
        align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#066592',
        },
      },
      axisLabel: {
        color: '#c6c6c6',
      },
    },
    series: [
      {
        name: '雨水资源利用量',
        type: 'bar',
        barWidth: 20,
        data: [12, 20],
      },
    ],
  },
};
export default optionChart;