import * as echarts from "echarts";

const commonStyle = {
  xAxis: {
    type: "category",
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(185,185,185,0.3)",
      },
    },
    axisLabel: {
      show: true,
      interval:0,
      color: "rgba(255,255,255,0.6)",
      margin: 5,
    },
    data: ["正常", "较大", "异常"],
  },
  yAxis: {
    type: "value",
    show: false,
    axisLine: {
      show: false,
    },
  },
  grid: {
    top: "18px",
    left: "-10%",
    right: "0%",
    bottom: "0%",
    containLabel: true,
  },
};

const styleName1 = {
  ...commonStyle,
  series: [
    {
      data: [32, 40, 42],
      type: "bar",
      barWidth: 26,
      label: {
        show: true,
        color: "#fff",
        position: "top",
        formatter: ({ value }) => {
          return value ? value : "";
        },
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#F7BE5A",
          },
          {
            offset: 1,
            color: "#3D3523",
          },
        ]),
        borderRadius: [2, 2, 0, 0],
      },
    },
  ],
};

const styleName2 = {
  ...commonStyle,
  legend: {
    data: ['缺素', '正常'],
    textStyle:{
      color:'#fff'
    },
    left:'center',
    selectedMode: false,
    show:false
  },
  series: [
    {
      data: [0, 1, 0,13],
      type: "bar",
      barWidth: 26,
      stack: "total",
      name:'正常',
      label: {
        show: true,
        color: "#fff",
        position: "top",
        formatter: ({ value }) => {
          return value ? value : "";
        },
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#DAB767",
          },
          {
            offset: 1,
            color: "#3D3523",
          },
        ]),
        borderRadius: [2, 2, 0, 0],
      },
      emphasis: {
        color: '#B81500' // 高亮时的颜色
      },
    },
    {
      data: [16,15,16, 3],
      type: "bar",
      barWidth: 26,
      name:'缺素',
      stack: "total",
      itemStyle: {
        color: "rgba(56,56,56,0.94)",
        borderRadius: [2, 2, 0, 0],
      },
      emphasis: {
        color: '#B81500' // 高亮时的颜色
      },
      label: {
        show: true,
        position: "top",
        color: "#fff",
        formatter: ({ value }) => {
          return value ? value : "";
        },
      },
    },
  ],
};

const styleName3 = {
  ...commonStyle,
  series: [
    {
      data: [32, 40, 42],
      type: "bar",
      barWidth: 26,
      label: {
        show: true,
        color: "#fff",
        position: "top",
        formatter: ({ value }) => {
          return value ? value : "";
        },
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#F7BE5A",
          },
          {
            offset: 1,
            color: "#3D3523",
          },
        ]),
        borderRadius: [2, 2, 0, 0],
      },
    },
  ],
};

const styleName4 = {
  ...commonStyle,
  legend: {
    data: ['无需防治', '已防治', '未防治'],
    textStyle:{
      color:'#fff'
    },
    left:'right',
    selectedMode: false,
  },
  series: [
    {
      data: [12, 0, 0],
      type: "bar",
      barWidth: 26,
      name:'无需防治',
      label: {
        show: true,
        color: "#fff",
        position: "top",
        formatter: ({ value }) => {
          return value ? value : "";
        },
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#59B558",
          },
          {
            offset: 1,
            color: "#2D4C2C",
          },
        ]),
        borderRadius: [2, 2, 0, 0],
      },
      emphasis: {
        color: '#B81500' // 高亮时的颜色
      },
    },
    {
      data: [0, 11, 12],
      type: "bar",
      barWidth: 26,
      name:'已防治',
      stack: "total",
      label: {
        show: true,
        color: "#fff",
        position: "top",
        formatter: ({ value }) => {
          return value ? value : "";
        },
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#DAB767",
          },
          {
            offset: 1,
            color: "#3D3523",
          },
        ]),
        borderRadius: [2, 2, 0, 0],
      },
      emphasis: {
        color: '#B81500' // 高亮时的颜色
      },
    },
    {
      data: [0,15,16],
      type: "bar",
      name:'未防治',
      barWidth: 26,
      stack: "total",
      label: {
        show: true,
        position: "top",
        color: "#fff",
        formatter: ({ value }) => {
          return value ? value : "";
        },
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#CE7E43",
          },
          {
            offset: 1,
            color: "#53341D",
          },
        ]),
        borderRadius: [2, 2, 0, 0],
      },
    },
  ],
};


export const barOption = { styleName1, styleName2 ,styleName3,styleName4};
