Echarts在线免费图表

 
            let data = [10, 200,70,900];
function formatData(arr){
    for(let i=0;i<arr.length;i++){
        if(arr[i]>10&&arr[i]<=100){
            let percent1=(arr[i]-10)/100;
            arr[i]=percent1*10+10;
        }else if(arr[i]>100&&arr[i]<1000){
            let percent2 =(arr[i]-100)/1000;
            console.log(percent2);
            arr[i]=percent2*10+20;
        }
    }
    return arr;
}
option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D']
    },
    tooltip: {
        trigger: 'item',
        formatter:function(params) {
            let str=params.name+':'+params.value;
            if(params.value>=10&&params.value<100){
                let percent = (params.value-10)/10
                let value = Math.round(percent*100+10);
                str=params.name+' : '+value;
            }else if(params.value>100&&params.value<1000){
                let percent = (params.value-20)/10;
                let value =Math.round(percent*1000+20);
                str=params.name+' : '+value;
            }
            return '<div style="width:70px;height:50px;display:flex;align-items:center">\
                <span style="background-color:#D53A35;width:15px;height:15px;display:inline-block;border-radius:50%"></span>\
                <span>'+str+'</span>\
            </div>'
        }
        
    },
    yAxis: {
        type: 'value',
        max:30,
        interval:10,
        axisLabel:{
           formatter:function(value) {
            let item='';
            if(value==20){
                item='100'            
            }else if(value===30){
                item='1000'
            }else{
                item = 10;
            }
            return item
        } 
        }
        
    },
    series: [{
        data: formatData(data),
        type: 'bar'
    }]
};