echarts电量横向进度图

样式

image.png

代码

    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(right2Chart.value);
    myChart.clear()
    // 绘制图表
    let seriesData = [
        {
            value: arr.tiankuai,
            rate: 20,
            name: "田块整治投资金额（万元）",
            color: "#EDC486",
        },
        {
            value: arr.turang,
            rate: 16,
            name: "土壤改良投资金额（万元）",
            color: "#3DD3FD",
        }, {
            value: arr.guangai,
            rate: 18,
            name: "灌溉和排水投资金额（万元）",
            color: "#1396BB",
        }, {
            value: arr.tianjiandaolu,
            rate: 6,
            name: "田间道路投资金额（万元）",
            color: "#216EE1",
        }, {
            value: arr.nongtianfanghu,
            rate: 15,
            name: "农田防护和生态环境保护投资金额（万元）",
            color: "#0CDDB3",
        }, {
            value: arr.nongtianpeidian,
            rate: 25,
            name: "农田输配电设施投资金额（万元）",
            color: "#E262E7",
        }, {
            value: arr.kejifuwu,
            rate: 25,
            name: "科技服务投资金额（万元）",
            color: "#E262E7",
        },
        {
            value: arr.gongchengjianshe,
            rate: 25,
            name: "工程建设其他费用金额及独立费用（万元）",
            color: "#E262E7",
        },
    ];
    let yName = []; // y轴名称
    let data = []
    let maxValue = 10000; //最大值
    seriesData.forEach(val => {
        yName.push(val.name);
        data.push({
            name: val.name,
            value: val.value
        })
        if (val.value > maxValue) {
            maxValue = val.value
        }
    })
    let bgData = []
    data.forEach(element => {
        bgData.push({
            name: element.name,
            value: maxValue,
            type: element.type,
        });
    });
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none',
            },
            textStyle: {
                color: "#ffffff",
                align: 'left'
            },
            backgroundColor: "rgba(23,93,113,0.8)",
            borderColor: "#175D71",
            formatter: function (params) {
                return (
                    yName[params[0].dataIndex] +
                    data[params[0].dataIndex].value +
                    '万元'
                )
            },
        },
        xAxis: {
            max: maxValue,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        grid: {
            left: 20,
            top: 10,
            right: 80,
            bottom: 0
        },
        yAxis: [{ // 每条图形上面的文字
            inverse: false,
            data: yName,
            axisLabel: {
                padding: [0, 0, 45, 0],
                inside: true,
                textStyle: {
                    fontSize: 20,
                    fontWeight: 400,
                    color: '#CADFE6',
                    align: 'left',
                },
                formatter: '{value}',
                rich: {
                    a: {
                        color: 'transparent',
                        lineHeight: 20,
                        fontSize: 12,
                        shadowColor: 'rgba(0, 0, 0, 1)',
                        shadowBlur: 10,
                    },
                },
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
        },
        { // y轴最右侧的文字
            axisTick: 'none',
            axisLine: 'none',
            axisLabel: {
                margin: 10,
                formatter: val => {
                    return val
                },
                textStyle: {
                    color: '#1fc7ab',
                    fontSize: '12',
                }
            },
            data: data,
        }
        ],
        animationDuration: 2000,
        series: [{
            // 背景样式
            name: '背景',
            type: "pictorialBar",
            barWidth: 7,
            // barHeight: 10,
            stack: '总量',
            barGap: '-100%',
            symbol: 'fixed',
            symbolRepeat: 'repeat',
            legendHoverLink: false,
            itemStyle: {
                normal: {
                    color: 'rgba(153, 153, 153, 0.23)'
                }
            },
            data: bgData,
            symbolSize: [8, 15],
            animation: false, //关闭动画
            z: 0
        },
        {
            name: 'info',
            type: "pictorialBar",
            barWidth: 7,
            legendHoverLink: false,
            silent: true,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#1c6678',
                    },
                    {
                        offset: 1,
                        color: '#1caf97',
                    },
                    ],
                    global: false // 缺省为 false
                }
            },
            symbolRepeat: 'fixed',
            symbolMargin: 2,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [6, 15],
            symbolPosition: 'start',
            symbolOffset: [0, -1],
            data: data,
            z: 1,
        },
        ]
    };
    option && myChart.setOption(option);