Echarts在线免费图表

 
            var dataList = [
    { name: '系列一', value: 73, max: 100 },
    { name: '系列二', value: 18, max: 100 },
    { name: '系列三', value: 43, max: 100 },
    { name: '系列四', value: 28, max: 100 },
];
var colorList1 = ['rgba(38, 138, 255, 0.9)', 'rgba(30, 214, 255, 0.9)', 'rgba(61, 255, 220, 0.9)', 'rgba(54, 240, 151, 0.9)']
var colorList2 = ['#1A60B1', '#1691B3', '#2AAB9C', '#25A270']
var colorList3 = ['#268AFF', '#1ED6FF', '#3DFFDC', '#36F097']
var colorList4 = ['rgba(38, 138, 255, 0.2)', 'rgba(30, 214, 255, 0.2)', 'rgba(61, 255, 220, 0.2)', 'rgba(54, 240, 151, 0.2)']


// 头部数据
let topData = dataList.map((item, index) => {
    return {
        name: '',
        value: item.max,
        symbolPosition: 'end',
        itemStyle: {
            color: colorList1[index]
        },
    };
});
// 底部立体柱子
let bottomBar = dataList.map((item, index) => {
    return {
        value: item.value,
        itemStyle: {
            normal: {
                color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: 'linear',
                    global: false,
                    // color:colorList2[index]
                    colorStops: [
                        {
                            //第一节下面
                            offset: 0,
                            color: colorList2[index]
                        },
                        {
                            offset: 1,
                            color: colorList2[index]
                        }
                    ]
                }
            }
        }

    };
});
// 底下圆片
let bottomCircle = dataList.map((item, index) => {
    return {
        name: '', value: item.max,
        itemStyle: {
            color: colorList3[index]
        },
    };
});
// 中间圆片
let middleCircle = dataList.map((item, index) => {
    return {
        name: '', value: item.value, symbolPosition: 'end',
        itemStyle: {
            color: colorList3[index]
        },
    };
});
// 上边的柱子
let upBar = dataList.map((item, index) => {
    return {
        name: item.name, value: item.max - item.value,
        itemStyle: {
            color: colorList4[index]
        }
    };
});

option = {
    backgroundColor: '#333333',
    tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0,0,0,0.5)',
        borderColor: 'rgba(89,211,255,1)',
        borderWidth: 2,
        padding: 5,
        textStyle: {
            color: 'rgba(89,211,255,1)',
            fontSize: 18,
            width: 300,
            height: 40
        },
        formatter: '{c}' + '%',
        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
        // 自定义的 CSS 样式
    },
    grid: {
        bottom: '10%',
        top: '35%',
        right: '0%',
        left: '0%'
    },
    xAxis: {
        data: ['系列一', '系列二', '系列三', '系列四', '系列五'],
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: 'rgba(255,255,255,0.5)'
            },
            margin: 30 //刻度标签与轴线之间的距离。
        }
    },
    yAxis: {
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        }
    },
    series: [
        // 头
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [120, 45],
            symbolOffset: [0, -20],
            z: 12,
            data: topData
        },
        //底部立体柱
        {
            stack: '1',
            type: 'bar',
            silent: true,
            barWidth: 120,
            data: bottomBar,

        },
        //最底下的圆片
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [120, 30],
            symbolOffset: [0, 16],
            z: 12,

            data: bottomCircle
        },
        // 中间圆片
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [120, 42],
            symbolOffset: [0, -20],

            z: 12,
            data: middleCircle
        },
        //上部立体柱
        {
            //上部立体柱
            stack: '1',
            type: 'bar',
            label: {
                show: true,
                position: 'top', //top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
                distance: 30,
                color: 'rgba(255,255,255,0.5)',
                fontSize: 20,
                formatter: function (item) {
                    var a = 100;
                    return a - item.value + '%';
                }
            },
            silent: true,
            barWidth: 120,
            //barGap: '-100%', // Make series be overlap
            data: upBar,
            z: 10,
        }
    ]
};