echart评分进度自定义图片

181 阅读1分钟

Snipaste_2022-01-11_15-33-18.png

var img1 = {
    a: 'https://yashi-daping.oss-cn-hangzhou.aliyuncs.com/zhihuishewu/green.png',//有颜色的
    b: 'https://yashi-daping.oss-cn-hangzhou.aliyuncs.com/zhihuishewu/grey.png',//灰色背景
};
var peoples = [
    {
        value:4.5, 
        symbol: 'image://' + img1.a,//有颜色背景
    }
];
option = {
    backgroundColor: '#181b22',
    grid: {
        left: '5%',
        top: '40%',
        bottom: '30%',
        right: '20%',
        containLabel: true,
    },
    tooltip: {
        trigger: 'item',
    },
    xAxis: {
        splitLine: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false,
        },
        axisTick: {
            show: false,
        },
    },
    yAxis: [
        {
            type: 'category',
            inverse: false,
            data: ['环保节约指数:'],
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    type: 'dashed',
                    color: '#1ED137',
                },
            },
            axisLabel: {
                margin: 35,
                textStyle: {
                    color: '#5994F2',
                    fontSize: 14,
                },
            },
        },
    ],
    series: [
        {
            tooltip: {
                show: false,
            },
            z: 4,
            type: 'pictorialBar',
            symbolSize: ['30', '30'],
            symbolRepeat: 'fixed',
            data: [
                {
                    value: 5,
                    symbol: 'image://' + img1.b,//灰色背景
                }
            ],
        },
  
        {
            z: 6,
            type: 'pictorialBar',

            symbolSize: ['30', '30'],

            animation: true,
            symbolRepeat: 'fixed',
            symbolClip: true,
            symbolPosition: 'start',
            symbolOffset: [0, 0],
            data: peoples,
            label: {
                normal: {
                    show: true,

                    textStyle: {
                        color: '#1ED137',
                        fontSize: 20,
                    },
                    formatter: function (data) {
                        console.log(data);
                        return data.value ;
                    },
                    position: 'right',
                    offset: [35, 0],
                },
            },
        },
        {
            type: 'bar'
        },
         {
            data:[0.3447,0.1316,0.0985,0.1333]
        }
    ],
};