樣式

image.png

代碼

    // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
    let myChart = echarts.init(right2Chart.value);
    myChart.clear()
    // 繪制圖表
    let seriesData = [
        {
            value: arr.tiankuai,
            rate: 20,
            name: "田塊整治投資金額（萬(wàn)元）",
            color: "#EDC486",
        },
        {
            value: arr.turang,
            rate: 16,
            name: "土壤改良投資金額（萬(wàn)元）",
            color: "#3DD3FD",
        }, {
            value: arr.guangai,
            rate: 18,
            name: "灌溉和排水投資金額（萬(wàn)元）",
            color: "#1396BB",
        }, {
            value: arr.tianjiandaolu,
            rate: 6,
            name: "田間道路投資金額（萬(wàn)元）",
            color: "#216EE1",
        }, {
            value: arr.nongtianfanghu,
            rate: 15,
            name: "農(nóng)田防護(hù)和生態(tài)環(huán)境保護(hù)投資金額（萬(wàn)元）",
            color: "#0CDDB3",
        }, {
            value: arr.nongtianpeidian,
            rate: 25,
            name: "農(nóng)田輸配電設(shè)施投資金額（萬(wàn)元）",
            color: "#E262E7",
        }, {
            value: arr.kejifuwu,
            rate: 25,
            name: "科技服務(wù)投資金額（萬(wàn)元）",
            color: "#E262E7",
        },
        {
            value: arr.gongchengjianshe,
            rate: 25,
            name: "工程建設(shè)其他費(fèi)用金額及獨(dú)立費(fèi)用（萬(wàn)元）",
            color: "#E262E7",
        },
    ];
    let yName = []; // y軸名稱(chēng)
    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 +
                    '萬(wàn)元'
                )
            },
        },
        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軸最右側(cè)的文字
            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, //關(guān)閉動(dòng)畫(huà)
            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);