echarts插件实现饼图、柱状图案例

丰富的官网案例

官网上提供了很多案例，在线修改代码会同步样式

饼图：

var data = genData(50);

option = {
    color: ['#4472c5', '#70ad46', '#7d96bc','#3fa7dc','#ffc100','#a5a5a5','#ef7e30'],
    title : {
        text: '同名数量统计',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        point: ['50%', '50%'],
        formatter: "{b} <br/>值 : {c} ({d}%)"
    },
    legend: {
        // type: 'scroll',
        // orient: 'horizontal',
        
        selectedMode:false,//取消鼠标滑过事件
        icon: "rect",
        itemWidth: 10,
        itemHeight: 10,
        top: 30,
        x:'center'
    },
    series : [
        {
            name: '姓名',
            type: 'pie',
            radius : '45%', //调整大小
            center: [' 50%', '35%'], //调整位置
            minAngle:20,
            data: data.seriesData,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal: {
                    label: {
                        position: 'inner',
                        formatter: '{d}%'
                    }
                }
            }
        }
    ]
};

function genData(count) {
    var nameList = [
        '赵', '钱', '孙', '李', '周', '吴', '郑'];
    var legendData = [];
    var seriesData = [];
    for (var i = 0; i < 7; i++) {
        name = nameList[i];
        legendData.push(name);
        seriesData.push({
            name: name,
            value: Math.round(Math.random() * 100000)
        });
    }

    return {
        legendData: legendData,
        seriesData: seriesData
    };
}

柱状图：

var data = genData(50);

option = {
    color:['#a3c2e7', '#8be0cf', '#f7b498', '#f97442', '#97b498', '#b9c9c9','#277eab'],
    title : {
        text: '同名数量统计',
        x:'center'
    },
    legend: {
        selectedMode:false,//取消鼠标滑过事件
        icon: "rect",
        itemWidth: 10,
        itemHeight: 10,
        bottom: 320,
        x:'center'
    },
    tooltip: {
        formatter: "{b} : {c}"
    },
    grid:{ 
        	x: 280,
        	x2:280,
            y: 80,
            y2: 380
    },
    xAxis: {type: 'category'},
    yAxis: {type: 'value'},
    series: data.showDataArr
};

function genData(count) {
    var nameList = [
        '赵', '钱', '孙', '李', '周', '吴', '郑','员'];
    var legendData = [];
    var seriesData = [];
    for (var i = 0; i < 8; i++) {
        name = nameList[i];
        legendData.push(name);
        seriesData.push({
            name: name,
            value: Math.round(Math.random() * 10000)
        });
    }
    
    var showDataArr=[];
    $(seriesData).each(function(index,value){
        var showDataObj={};
        showDataObj.type='bar';
        showDataObj.name=value.name;
        showDataObj.data=[value];
        showDataArr.push(showDataObj);
    })
    return {
        legendData: legendData,
        seriesData: seriesData,
        showDataArr:showDataArr
    };
}