Echarts在线免费图表

 
            var spirit = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAxCAYAAADEIbk7AAAAAXNSR0IArs4c6QAABE5JREFUWEe1mF1sFFUUx/9ntttuNQi0lSgktjO1IX6FaB+gMwNW0aCGqDGSBgyJgaQxYXebPviBklghBh4koZ32RfyK8SvwQASJGENa0p0taiQ+SDXqzhZJav1o14jph9vOMXdgtZWdzp21va/zP+d3Tu69554zBInV0dxbNpavewLMjzNhDYAqAGMAzjHxkZqyH4909N0zPZ8rCuLsWj90lzLjfgBCg7+WB4m5pSt989d+mnlBbbqzwSWcAlAZFBCAP+FiozWgfV5M6wtKrP/+eriRbwBUS0AKkpFIlG451Kf+/l8bf5DpdIKRDAHxpAza322rz0uBxOaP5mt/AbA8LAjAT5atrgKIZ9sWzSjRNHQnFPdcCRDPxCVe3ZOq/y4QlDQyDzHoZKkgKNRs9atnAkFx/Yd7iZTTpYIUonWdKfWzQFDSyNzEoAslgrg8ml9xsG/1b4EgIUgYzleAVwXCrgHL1nSpUydEcTOzjZjeDUth4JFuWzsuDQKYknr2OBM2h4AdsWytJVRlEOJnjG+XTHD5MRA2BsGI8dHkVKzl1S9XjocGCYMtWzhy43C2nYEXACwr4mQUTHtHVtX1HD1KM34BBVbvguEu3amNKPQig+8HowbAeQJZVbnx9zsGb/srMOMgQdwYepDgitpl+mj72aWXuwfUT+bz5ZtRa+PwNbHY1GEGbwsKRnwnojerxsaf8suuKKi96WLltJL/FIAhA/lXw73VuckHisGKF1U9+zqId4SDFNR8yLLr2wPvUZuZXesyny0N4lkxlMjtVn/t4GwfV2WU0LPvgXjr/wABhMNWSmv1BYk7c8NwVhTDYvclDHvEstWVsx+/ORkljOw6gAfCePS9oOzeMbsrmgOKG5nnCLR/YUBIdqU1q+BrbkamcwqMTQsBAvChZWuPXgXquPV8+ejyStEmyfRwMrHkqm21pgPkehe6YJE0MiaD+mU8yGpcRWns6a/zmpx/QAnT2QPGPlknMjoCnu6ytVfmgnSnD4S7ZRxIawgnrZTmPZxeRk82Z2NL8iz2p0LaiZzwUnX0QpWYNDxQ3Mw2E3OvnG1YFTVZtnrWAyV0Zx8Ie8K6kNEzeHe3XX/gMshwUuGfBBmMV2JPW2ntPhIPXEVsUuxPVNI0rGyiOjexjOJN2U2ksBi2FnNtoISeOQCiZxeTQsQvUdxwxIlYu5ggMM5QwnDENB1ZVBAwLkC/Al6ftmiLAYcSZmYHmF6bXfcWmDgNxtbL98h01hBgMlOUmK+FwlFm2g2gPCQ0B9Degg0BOebplJVuyPg2kEndORFykhADyBtWWt1ZLDh/kOlsZ8bboTIiPGyltBOhQO1NF6umlfzPAMokYX/gupkV1scNU6FAV/ZOuocg4J0uW9vuF9S8Y0vccHYSIE5k4CJSHutK1R0rCdTamFlaEfOm86UBpJFLUVLf6lMnSwIJoyt/uA4Cvr/RBhXmts50/RfzBfM3UTt1iz4UtK8AAAAASUVORK5CYII=';
var numValDom3 = 67;
var maxData = 100;
var direction = "left"
option = {
    //你的代码
    backgroundColor: '#081736',
    xAxis: {
        show: false,
        max: 100,
        splitLine: { show: false },
        offset: 10,
        axisLine: {
            lineStyle: {
                color: '#999'
            }
        },
        axisLabel: {
            margin: 20
        }
    },
    yAxis: {
        show: false,
        data: [],
        inverse: true,
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: {
            margin: 10,
            color: '#999',
            fontSize: 16
        }
    },

    series: [{
        type: 'pictorialBar',
        symbol: spirit,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbolClip: true,
        // symbolSize: 30,
        symbolBoundingData: maxData,
        symbolSize: [25, 50],
        data: [numValDom3],
        z: 10
    }, {

        type: 'pictorialBar',
        itemStyle: {
            normal: {
                opacity: 0.2
            }
        },
        label: {
            show: false,
            formatter: function (params) {
                return (params.value / maxData * 100).toFixed(1) + ' %';
            },
            position: direction,
            offset: [0, 5],
            color: 'green',
            fontSize: 18,
            fontWeight: "bold",
            opacity: 1
        },
        animationDuration: 0,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbol: spirit,
        symbolSize: [25, 50],
        symbolBoundingData: maxData,
        data: [100],
        z: 5
    }]
};