RT_SY/src/pages/bigdata/sy/chart.js

const option01 = {
    color: ["#2f89cf"],
    tooltip: {
        trigger: "axis",
        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: "10",
        top: "30",
        right: "10",
        bottom: "5",
        containLabel: true
    },
    xAxis: [{
        type: "category",
        data: [],
        axisTick: {
            alignWithLabel: true
        },
        axisLabel: {
            textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12"
            }
        },
        axisLine: {
            show: false
        }
    }],
    yAxis: [{
        type: "value",
        name: 'kg',
        nameTextStyle: {
            color: "rgba(255,255,255,.6)"
        },
        axisLabel: {
            textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12"
            }
        },
        axisLine: {
            lineStyle: {
                color: "rgba(255,255,255,.1)"
                // width: 1,
                // type: "solid"
            }
        },
        splitLine: {
            lineStyle: {
                color: "rgba(255,255,255,.1)"
            }
        }
    }],
    series: [{
        name: "产量",
        type: "bar",
        barWidth: "12",
        data: [],
        itemStyle: {
            normal: {
                barBorderRadius: 30,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#3bedcb' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#086ce6' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
            },
        },
    }]
};
let colors = ['#f21c1c', '#f85d00', '#fd8b0e', '#fcbe2b']

function optionFun(arrName,arrValue) {
    console.log(arrName)
    console.log(arrValue)
    return {
        yAxis: [{
            type: 'category',
            inverse: true,
            axisLine: {
                show: false //坐标线
            },
            axisTick: {
                show: false //小横线
            },
            axisLabel: {
                color: '#49b0db',
                fontSize: 13
            },
            data: arrName
        }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
                textStyle: {
                    fontSize: '13'
                },
            },
            data: arrValue.map((value, index) => {
                return {
                    value,
                    textStyle: {
                        color: colors[index]
                    }
                }
            })
        }],
        xAxis: {
            show: false,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none'
            },
            formatter: function (params) {
                return params[0].name + ' : ' + params[0].value
            }
        },
        grid: {
            top: '40',
            right: '50',
            left: '80',
            bottom: '40' //图表尺寸大小
        },
        series: [{
            type: 'bar',
            barWidth: '10px',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(26, 34, 96, 1)',
                barBorderRadius: [30, 30, 30, 30] //圆角大小
            },
            itemStyle: {
                normal: {
                    color: (params) => {
                        return colors[params.dataIndex]
                    }, //每个数据的颜色
                    barBorderRadius: [30, 30, 30, 30], //圆角大小
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 103, 255, 0.2)',
                    shadowOffsetX: -5,
                    shadowOffsetY: 5,
                },
            },
            data:arrValue
        }]
    }
}
export {
    option01,
    optionFun
}