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

let optionChart = {
  // 饼图
  option1: {
    color: pinias.$state.chartColor,
    title: { text: '管线种类', x: 'center', y: 'center', textStyle: { fontSize: '13', color: '#00d1ff' } },
    grid: { bottom: 0 },
    // 显示暂无数据
    graphic: {
      type: 'text', // 类型：文本
      left: 'center',
      top: 'middle',
      silent: true, // 不响应事件
      invisible: false, // 有数据就隐藏
      style: {
        fill: '#c6c6c6',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '18px',
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c}个 ({d}%)',
    },
    series: {
      name: '',
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { name: '钢管', value: 9 },
        { name: 'PVC', value: 12 },
        { name: 'PE', value: 9 },
        { name: '镀锌管', value: 3 },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
      label: {
        show: true,
        formatter: '{d|{b}}\n {c}个 ({d|{d}%})',
        position: 'outside',
        rich: {
          d: {
            fontSize: 13,
            color: '#509BE0',
            align: 'left',
            fontFamily: 'SourceHanSansCN',
          },
        },
      },
    },
  },
  // 柱状图
  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: '5%',
      top: '20%',
      bottom: '3%',
      containLabel: true,
    },
    legend: {
      top: '2%',
      orient: 'horizontal', //horizontal
      left: 'center', //left ,center
      textStyle: {
        color: 'inherit',
      },
    },
    xAxis: {
      type: 'category',
      data: ['PH', 'COD'],
      axisLabel: {
        color: '#c6c6c6',
      },
      axisLine: {
        lineStyle: {
          color: '#066592',
        },
      },
    },
    yAxis: {
      name: '',
      type: 'value',
      nameLocation: 'end', // 坐标轴名称显示位置
      nameGap: 15, // 坐标轴名称与轴线之间的距离
      nameTextStyle: {
        color: '#c6c6c6', //字体颜色
        fontSize: 12, //字体大小
        align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#066592',
        },
      },
      axisLabel: {
        fontSize: 12,
        color: '#c6c6c6',
      },
    },
    series: [
      {
        name: '',
        type: 'bar',
        barWidth: 10,
        data: [12, 20],
        label: {
          show: true,
          position: 'top',
        },
      },
    ],
  },
  // 柱状图+折线图
  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 框限制在图表的区域内
    },
    title: {
      left: 'left',
      text: '',
      top: 10,
      bottom: 10,
      left: 10,
      textStyle: {
        color: '#545E75', //字体颜色
        fontSize: 16, //字体大小
      },
    },
    grid: {
      left: '3%',
      right: '5%',
      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: 'm',
        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: 'm³',
        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: 'line',
        smooth: true,
        yAxisIndex: 0,
        symbolSize: 8,
        data: [14, 8, 5],
      },
      {
        name: '调蓄容积',
        type: 'bar',
        barWidth: 10,
        yAxisIndex: 1,
        data: [24, 12, 9],
      },
    ],
  },
  // 折线图
  option4: {
    color: ['#1480FF', '#FF4444'],
    // 显示暂无数据
    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 框限制在图表的区域内
    },
    grid: {
      left: '3%',
      right: '5%',
      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: '吨',
        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: '雨水口COD排放量',
        type: 'line',
        smooth: true,
        data: [24, 12, 9],
        // 填充区域的样式
        areaStyle: {
          // 填充色渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: 'rgba(20, 128, 255, 0)' },
            { offset: 0, color: 'rgba(20, 128, 255, 1)' },
          ]),
        },
      },
      {
        name: '溢流口COD排放量',
        type: 'line',
        smooth: true,
        data: [14, 8, 5],
        // 填充区域的样式
        areaStyle: {
          // 填充色渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: 'rgba(255, 68, 68, 0)' },
            { offset: 0, color: 'rgba(255, 68, 68, 1)' },
          ]),
        },
      },
    ],
  },
  //双边折线图
  option5: {
    tooltip: {
      show: true,
      position: 'top',
      offset: [0, 0],
      textStyle: {
        color: '#666666',
        fontSize: 14,
      },
      formatter: `{a0}</br> {b0}:{c0}%`,
    },
    legend: {
      type: 'plain',
      textStyle: {
        color: '#D1DEEE', //文字的颜色
        fontSize: 12, //文字的字号
      },
    },
    grid: [
      {
        show: false,
        left: 0,
        top: 30,
        bottom: 22,
        width: '27%',
      },
      {
        show: false,
        left: '30%',
        top: 30,
        bottom: 0,
        containLabel: true,
        width: '33%',
      },
      {
        show: false,
        left: '63%',
        top: 30,
        bottom: 0,
        containLabel: true,
        width: '33%',
      },
    ],
    xAxis: [
      {
        gridIndex: 0,
        show: true,
      },
      {
        gridIndex: 1,
        type: 'value',
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          verticalAlign: 'middle',
          textStyle: {
            color: '#6E8098',
            fontSize: 12,
          },
        },
        splitLine: {
          show: false,
        },
      },
      {
        gridIndex: 2,
        type: 'value',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          verticalAlign: 'middle',
          textStyle: {
            color: '#6E8098',
            fontSize: 12,
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        name: '',
        gridIndex: 0,
        type: 'category',
        inverse: true,
        position: 'right',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      {
        gridIndex: 1,
        type: 'category',
        inverse: true,
        position: 'right',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          margin: 8,
          textStyle: {
            color: '#9D9EA0',
            fontSize: 12,
          },
        },
        data: [],
        triggerEvent: true,
      },
      {
        gridIndex: 2,
        type: 'category',
        inverse: true,
        position: 'left',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          textStyle: {
            color: '#9D9EA0',
            fontSize: 12,
          },
        },
        data: [],
        triggerEvent: true,
      },
    ],
    series: [
      {
        name: '资金占比',
        type: 'bar',
        barGap: 20,
        barWidth: 6,
        xAxisIndex: 1,
        yAxisIndex: 1,
        showBackground: true,
        backgroundStyle: {
          color: '#011431',
        },
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: true,
            position: 'left',
            offset: [0, 0],
            textStyle: {
              color: '#666666',
              fontSize: 14,
            },
          },
        },
        itemStyle: {
          normal: {
            barBorderRadius: [10, 0, 0, 10],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: '#FFCE65',
              },
              {
                offset: 1,
                color: '#052a57',
              },
            ]),
          },
        },
        data: [],
      },
      {
        name: '面积占比',
        type: 'bar',
        barGap: 20,
        barWidth: 6,
        xAxisIndex: 2,
        yAxisIndex: 2,
        showBackground: true,
        backgroundStyle: {
          color: '#011431',
        },
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: true,
            position: 'right',
            offset: [0, 0],
            textStyle: {
              color: '#666666',
              fontSize: 14,
            },
          },
        },
        itemStyle: {
          normal: {
            barBorderRadius: [0, 10, 10, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: '#303e54',
              },
              {
                offset: 1,
                color: '#1093FA',
              },
            ]),
          },
        },
        data: [],
      },
    ],
  },
  // 堆叠柱状图
  option6: {
    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',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      textStyle: {
        color: '#fff',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['后湖公园', '槐荫公园', '董永公园'],
      axisLabel: {
        textStyle: {
          color: '#fff',
        },
        interval: 0,
        formatter: function (value, index) {
          // debugger;
          if (index % 2 != 0) {
            return '\n\n' + value;
          } else {
            return value;
          }
        },
      },
    },
    yAxis: [
      {
        type: 'value',
        name: '单位:公顷',
        nameTextStyle: {
          color: '#fff',
        },
        axisLabel: {
          textStyle: {
            color: '#fff',
          },
        },
      },
    ],
    series: [
      {
        name: '水体面积',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series',
        },
        data: [9.3, 0.9, 0.78],
        itemStyle: {
          color: '#29bdff',
        },
        barWidth: '50%',
      },
      {
        name: '绿地面积',
        type: 'bar',
        stack: 'Ad',

        emphasis: {
          focus: 'series',
        },
        data: [4.8, 14.8, 4.7],
        itemStyle: {
          color: '#67c23a',
        },
      },
      {
        name: '硬化区域面积',
        type: 'bar',
        stack: 'Ad',

        emphasis: {
          focus: 'series',
        },
        data: [3.3, 0.17, 0.78],
        itemStyle: {
          color: '#8e8e8e',
        },
      },
    ],
  },
};

export default optionChart;