agriculture-one-map/src/views/warningHome/components/chart_components/chartOption.js

import * as echarts from "echarts";

const commonxAxis = {
    axisLabel: { color: '#9F9F9F' },
    axisLine: { lineStyle: { color: 'rgba(185, 185, 185, 0.12)' } },
}
const commonyAxis = {
    splitLine: { lineStyle: { color: 'rgba(185, 185, 185, 0.12)' } },
    axisLabel: {
        color: "#9F9F9F",
    },
}

export const pieOption = {
    tooltip: {
        trigger: 'item',
        textStyle: {
            color: "#1D2129",
            fontSize: 11,
        },
        formatter: function (params) {
            const data = params.data;
            const total = 3774;
            const percent = (data.value / total * 100).toFixed(2);
            return `${params.marker}${data.name}     ${percent}%     ${data.value}亩`;
        }
    },
    title: {
        text: '总种植面积(亩)',
        subtext: '1000',
        x: '49%',
        y: '39%',
        textAlign: 'center',
        textStyle: {
            fontSize: 11,
            fontWeight: 'normal',
            color: '#FFFFFF'
        },
        subtextStyle: {
            fontSize: 13,
            fontWeight: 'normal',
            color: '#FFFFFF'
        }
    },
    color: ['#2199F8', '#14C9C9', '#FFCC4B', '#8F46F4', '#FF7878', '#9FDB1D'],
    series: [
        {
            name: '种植作物',
            type: 'pie',
            radius: ['56%', '86%'],
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: '水稻' },
                { value: 735, name: '小麦' },
                { value: 580, name: '猫草' },
                { value: 484, name: '中草药' },
                { value: 300, name: '蔬菜' },
                { value: 300, name: '荔枝' },
            ]
        }
    ]
};


export const barOption = {
    grid: {
        top: 20,
        left: 10,
        right: 10,
        bottom: 10,
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        ...commonxAxis,
        data: ['从化区', '增城区', '花都区', '番禺区', '南沙区', '从化区', '荔湾区']
    },
    yAxis: {
        type: 'value',
        ...commonyAxis,
        axisLabel: {
            formatter: "{value}%",
            color: "#9F9F9F",
        },
    },
    series: [
        {
            data: [50, 20, 15, 58, 7, 28, 13],
            type: 'bar',
            barWidth: 10,
            itemStyle: {
                borderRadius: [8, 8, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#FFD489',
                    },
                    {
                        offset: 1,
                        color: '#996324',
                    },
                ]),
            },
        }
    ]
}

export const lineOption = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
        top: 20,
        left: 10,
        right: 10,
        bottom: 10,
        containLabel: true,
    },
    xAxis: {
      ...commonxAxis,
      type: 'category',
      boundaryGap: false,
      data: ['2023-6', '2023-12', '2024-6', '2024-12', '2025-6', '2025-12']
    },
    yAxis: {
        ...commonyAxis,
      type: 'value'
    },
    series: [
      {
        name: '粮食',
        type: 'line',
        smooth: true,
        showSymbol: false,
        itemStyle: {
          color: '#178B00'
        },
        lineStyle: {
          color: '#178B00'
        },
        data: [250, 232, 221, 294, 310, 380]
      },
      {
        name: '果类',
        type: 'line',
        smooth: true,
        showSymbol: false,
        itemStyle: {
          color: '#2199F8'
        },
        lineStyle: {
          color: '#2199F8'
        },
        data: [220, 182, 191, 234, 290, 330]
      },
      {
        name: '蔬菜',
        type: 'line',
        smooth: true,
        showSymbol: false,
        itemStyle: {
          color: '#FAA53D'
        },
        lineStyle: {
          color: '#FAA53D'
        },
        data: [120, 132, 101, 134, 90, 230]
      },
    ]
  };