carInsightSystem_wxapp/components/option/pictographicOption.js

// 象形
export default function pictographicOption(dRegion = [], dValue = [], dSum = 0) {
    if(dRegion.length < 5) {
        let n = 5 - dRegion.length;
        for(let i = 0; i < n; i++) {
            dRegion.push('')
        }
    }
    return {
        tooltip: {
            trigger: "axis",
            backgroundColor: "#08182F",
            color: "#fff",
            borderColor: "#3373CC",
            textStyle: {
                color: "#fff", //设置文字颜色
                fontSize: 9
            },
            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
            confine: true
        },
        xAxis: {
            show: false,
            type: 'value'
        },
        yAxis: {
            data: dRegion,
            inverse: true,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                margin: 10 ,
                color: '#333333',
                fontSize: 12
            }
        },
        grid: {
            top: '10%',
            bottom: 5,
            height: 220,
            width: 40,
            left: 58,
        },
        series: [{
            itemStyle: {
                normal: {
                    color: '#0084FF',
                    barBorderRadius: 12
                },
            },
            // current data
            type: 'bar',
            barWidth: 8,
            data: dValue,
            label: {
                show: true,
                formatter: function (params) {
                    return ((params.value / dSum) * 100).toFixed(2) + ' %';
                },
                // position: 'right',
                // offset: [20, 0],
                color: '#333333',
                fontSize: 10,
                position: [50, -2]
            },
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            markLine: {
                symbol: 'none',
            },
        }, ]

    }
}