Echarts在线免费图表

 
            

var mid = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAD6CAYAAAAbZO+fAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUQ5OTNGMTBBQzIyMTFFQUFCNjFCRjdFNDdGNzcyQkEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUQ5OTNGMTFBQzIyMTFFQUFCNjFCRjdFNDdGNzcyQkEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRDk5M0YwRUFDMjIxMUVBQUI2MUJGN0U0N0Y3NzJCQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRDk5M0YwRkFDMjIxMUVBQUI2MUJGN0U0N0Y3NzJCQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnVeLVEAAAQGSURBVHja7J3dahRBEIW72gVBCORV9UF8Ad/OK++UEDAgbtnjJhB350Kiez5SdQYmF8Nuek9XV9Wpn+6JzBzVrzkaXAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAb5Cq8D/QPiw799Pz/+BUjFIOSkbb8vxntk43aIxskN5AEYeBsnO+ikTJLPQYZYksrJzAMyeEiBLkmmGKQY4LlOljc8AehKaevaxPCAkqzoQiCdDL19rS7JYPxkEmSgNq3DlmsL6yrXfz3I6KGTXq7XDLW2QTXpyST8pK2rQb78mtWta3Twk9nBup5gzuo6GaMBrUvTuisv11kQJMZ4krSuKhcSHZbrBhNxIdqUZAOdVBs5YLlmB8MDM54pGpYwPCme3QCWq97wTKHhiXMXohr4CBieFAfNEVQUovZd2HINETyCu6Z2do8c46kqyYtKs252ITKgJuhYjkelk8qUZDCSnFLGA0lyk2UwhkcJ8g0gSTWt4wyP0oWgUYiytw6LQipKErOuQS1XdWYAiUK0sxucJAvrZIqzdU0KPpjh0Q0cv8Pm6rQu1zhRnKAHRwZ0OplSnbzwkyHUyeJVLf1Yf/hJ0XLNFTRHee6KBc1VueuFn6zoQqj6ZGIEXch4pOkPrNLcgPEMlvEUTknqD1MgNqSpJZmYCxnDedf/6kIInVRXmhPdJFrehVTVyU7ZOuIwhfq1kESrWpX95FEvyWC4q5qguz37CjoJFGEbBM0T0El5cnnU18no0uISXCto5cYIedCMcVdl0NykMWK6nF7AT45jC+46RgPuOqkt+OrZbdHUq+7IKu0nMUnOBtw1W0QhAHdN+cBYqOXGiFccal1IUuVCsKBZJ8lAeusGoZPIctXpyYlhVZdkEEGzOgrJIJuVdN0fLWohTapaDV6KUr7SnB2alSKxlKRaT8q3uKDnDAj3T9andQRBV4NM1LpWzvHI40nlhPYzPNr0B2h4KuokROtO1rXFa+CKpz969PEMNAqpeGAmtgUfO8RWma0DyIDe8DQgA+BOWCUZQIuwFfdqgdy1vOFp4kIGeWx/YYI+5Mt1NliuSBSCDIwd2185/aE2Bom+SqP8u9OF57tmg3J6RIflSmwSJU6MaFDwabONqUXbWXVJcuX04stVzl3ZM7LKZ9CFfjLDOllkubbIDDTQyeBO6lVfxV9GnfoZBXSyBXcdLRJZLdrO5Mt1jgbXkyQ/r/vTs2c3OzN/u/P92x2p3Oy4pnfrfnv6T/GwvvHt8fnDur+fffbHuu/Pnv1c993O+F93nt09fn67vmx/fgkwAL7BwWEFvy6OAAAAAElFTkSuQmCC"
var top = "data:image/png;base64,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"
var bottom = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAARCAYAAAB5LjRtAAABfUlEQVRIidXXv0tWURjA8Y/v6B/g0iqIWZoE4RhoW2Y0iRDNDs1hRIuI4uzgHEGjaLX1i2gLx8gc+rUoTgqRoKBy4ByRF3299/WeV/2O956H53zvc859zmkz8uUmPqNdbq50fNLbeTt7HrYwUMMyrmKpBUlbwSt0Y6UWk/3BCO7h9yWV+oEhjGEtPKjVDXgdqziNnfOZY2m28Qy9eH80uF5OHPwUffhwMX0OeYMeTB1XjOPkEiuxzA+x3pKpFucv7mMYv06KaiQX2MfLuEHnsHdOMoldzMZqLZ42+DS5xCYe4xa+VjXTkoR21Y8n+FcktKhcIrSNAYxH4VawgUcI/fFbmXxl5cSlOY8uvIhLNwdnztOMXKLpL1qASlbIWeQSpfdCAyrd21XIqfuLLTQRn+WvXJVcIvSfB7iLnwVjvmMwRz+tWi7xFtcw2eAY9x8TuIGPOSaRS048xj3Hdbyre7cUz7AzOc+wOeUSq7iDUbW2sGzDzSPcQMJNJB84AMF1UlvRkcWRAAAAAElFTkSuQmCC"
var bottom1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAhCAYAAAB9VDPAAAAE90lEQVRYhc2Z2VMVRxTGf91wBRFZBARRWVyCGzhRTGWxjFYSs/4HectL8h+RV59SleckVhaTMpqlSjCNJioagSuCylIgyKIXulM9d5Se4V5EM3P1q7oPdE/36Y/uc853ugVfLlEQKNkAHAF+x9MTcZk0n8u8fcWJ81KyBDgBvAbYlXgoeR44j6czSZpOlpyS+4EPgI1OaxHwNtCOkqfx9I2kzCdDTska4CNgZ6hdMI9hffDXJuBTlLwCfI+n78e9jHjJKZkC3gKOhuaWzFNp/qLJpBkUO5kWBzGUBL37gF0oeRb4A0/ruJYTX0BRclewW5ucVs16btCsL1PKsn/NUsKQ9Fig1V/DMkaBb/F0eq1mVwso/5+ckhWBX+0LtRczQb25QJ2ZzDv2rqhlTBxhiSp3vUAv8COenn2a+WTIKWlnfR04DqxzZnxIhemlxdwM7Uk+aAQDoo0Hoh0TcpN54AzQg6dN4cgp2QR8DNS7dihhgCat2MDDZ55zWpRxW7zKI5oiPcPAN3j6Tq5h8ZFTsgw4CRwM+UoRU9SZbhrM2Nony4NhsYUJcRgdSh82yFwAfsHTC/GSU9ISOQS8C09CuR29SLm5TKvpQ5L36DwzMhQxKPcy6/txkTN8BvgBT1+Oh5ySW4IjuC3Uvo4htpmLVJi52EhFMSnKGRGdZNgS6ekHvsPT489HbqVsykLygBrTw1YzkgSfnLgltjMlDqEpc7rtwn8Dzpkucsq43OSUPAC8H5FNS2zgKi36CikKpLYdPKSYQdnOPK+E/tlgU81p08X16JAwuaxsskdwR+irFHdpNN1Um5kC0Fgd46KKu6KTReoi310LSD6RcVlyWdl0NPgtO7CVTVXmIk3m1gsn5cKGrkGxg2nhOTLO4hHwq5VxposlwRemFPgM2ByaoIhJduszIdn0ssHKuJvyJJryyMqGgFMyyBtfQeTMLlHNv/IY46LypSQ2KjbRL4/nIGbTxNemi8Woz+0BPgRcQjZG9dGs/6aExUKtPS/mSZGWB1lgV0R0j9v0YLr8NOFjZbRU0urEY8AbEf+bo9r0sN3cfiGkrJ+lRSv3fT8rdXqs25yzacH6mTtktTxXF0TOllB7ihG2mh6qzINESOTChKjkjh8hN0d6rwcRMmflsbpCycquDuA9cM62YIky/qFVX6WY2IrLFbC5LS0PMEdbJLfZcG+vKK7FoS3tMXgH6Aydc8k0taabRnMvTk4+hsQ2Jn1VssFptYv9EziLp23Yj7UqaAQ+ARpD7etIs91cZKNZyDt2rZgS5QyLw2QiNiAdVOm2Wn+CeOu57FHtDHZy2bEFGcrNJVrNjeeqEBaRDMi9zLEfE6oEZv1KAC7lKlqTqsTLA1/siNR2k2w23dSb8TXPNSLqGRedaCrcdftVOPwUreFcJH2H0hJEVVfr2WB9kybdS5kviXJjRpQyJA7xiOYo3eAIDj/NfLLk8AkWBXnx2Ir7lEqjaDb9oXRr700GxW5mRAeGlNNjd+hnv+pe5d7ERfLkHkPJykDh7Am1FzNGg+mm1kxxT9Qw6t94VTtfmEA22Sr7mfJn4cg9hpJtAUn3yk6TYpSMf6nk7uNYUFUPPI+pwj+EeLoPJfuDY/pmIOMkGRqcrzJ+vsreMidS/Cb3EJJ9wTmDkr1BwGl1evsChTGVmP2CPGF52qaEUyhpU4a9jznn72zSAP4DgajQfVl1LbUAAAAASUVORK5CYII="

var data = [
    {x: "Sun", value: 22},
    {x: "Mon", value: 18},
    {x: "Tue", value: 19},
    {x: "Wed", value: 23},
    {x: "Thu", value: 29}
]

var x = []
var y = []
var imgList = []

data.forEach((item, index) => {
    x.push(item.x)
    y.push(item.value)
    imgList.push({
        coord: [index, item.value],
        symbolSize: [55, 40],
        symbolOffset: ['25%', 0],
        symbol: "image://" + top,
        value: item.value,
        label: {
            show: true,
            offset: [0, -30],
            fontSize: 16,
            color: "#00baff",
            formatter: function(params) {
                return params.value + '%'
            }
        }
    },
    {
        coord: [index, 0],
        symbolOffset: ['25%', 8.37],
        symbolSize: [56, 17],
        symbol: "image://" + bottom,
        itemStyle: {
            opacity: 0.8
        }
    },{
        coord: [index, 0],
        symbolOffset: ['22%', 0],
        symbolSize: [60, 33],
        symbol: "image://" + bottom1,
        itemStyle: {
            opacity: 0.8
        }
    })
})


var option = {
    title: {
        text: 'Awesome Chart'
    },
    xAxis: {
        offset: 20,
        data: x,
        axisLabel: {
            color: '#fff'  
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        }
    },
    yAxis: {
        show: false,
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        }
    },
    series: [{
        z:1,
        type: 'bar',
        barWidth: 27.5,
        symbolOffset: [0, -8],
        data: y,
        offset: 10,
        itemStyle:{
            normal:{
                color: {
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                        {offset: 0, color: 'rgba(0, 79, 197, 1)'},
                        {offset: 1, color: 'rgba(0, 79, 197, 0)'}
                    ]
                },
                opacity: 0.8
            }
        },
        markPoint: {
            data: imgList
        }
    },{
        z:1,
        type: 'bar',
        barWidth: 27.5,
        barGap: '-2%',
        symbolOffset: [0, -8],
        data: y,
        offset: 10,
        itemStyle:{
            normal:{
                color: {
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                        {offset: 0, color: 'rgba(0, 154, 255, 1)'},
                        {offset: 1, color: 'rgba(0, 154, 255, 0)'}
                    ]
                },
                opacity: 0.8
            }
        }
    }]
};