首页 > 代码库 > echarts-柱状图绘制

echarts-柱状图绘制

2024-09-04 06:17:12   220人阅读

又接到一个展示数据的活，看了下就是些柱状图，按照UI的要求绘制了一个简单的Demo

第一次用echarts绘制统计图，记录下

把图表展现出来：

<div id="bar" style="width: 500px;height: 500px;margin: 0 auto;"></div>

　　

var myChart = echarts.init(document.getElementById(‘bar‘));
ar option = {
    backgroundColor: ‘#0f375f‘,
    series: [{
        name: ‘bar‘,
        type: ‘bar‘,
        barWidth: 20
        }],
    data:[‘1‘,‘2‘]
}
myChart.setOption(option);

按照要求，柱状是要有圆角的：

series: [{
        name: ‘bar‘,
        type: ‘bar‘,
        barWidth: 20,
        itemStyle: {
            normal: {
                barBorderRadius: 5
        },
        data: barData
    }]

每个柱子上面是有数字显示的，而且数字是有千分位符号的：

series: [{
        name: ‘bar‘,
        type: ‘bar‘,
        barWidth: 20,
        label: {
            normal: {
                show: true,
                position: ‘top‘,
                formatter: function(num){
                    return fMoney(num.value, 0);
                }
            }
        }
        data: barData
    }]

//转换千分位
function fMoney (s, n) {  
    n = n >= 0 && n <= 20 ? n : 2;  
    //如果S为空返回0
    if (!s) {
        return 0;
    }
    s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";  
    var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1];  
    var t = "";  
    for (var i = 0; i < l.length; i++) {  
        t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");  
    }  
    return t.split("").reverse().join("");
}

每个柱子的颜色都是不一样的，柱子的颜色是可以渐变的：

series: [{
        name: ‘bar‘,
        type: ‘bar‘,
        barWidth: 20,
        itemStyle: {
            normal: {
                barBorderRadius: 5,
                color: function(params) {
                    // build a color map as your need.
                    var lightColor = new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: ‘#14c8d4‘},{offset: 1, color: ‘#43eec6‘}]);
                    var colorList = [
                        lightColor,‘#B5C334‘,‘#FCCE10‘,‘#E87C25‘,‘#27727B‘
                    ];
                    return colorList[params.dataIndex]
                }
            }
        },
        data: barData
    }]

把代码整合一下，HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Echarts</title>
        <style type="text/css">
            #bar {
                width: 500px;
                height: 500px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div id="bar"></div>

        <script src="http://cdn.bootcss.com/echarts/3.4.0/echarts.min.js"></script>
        <script src="http://www.mamicode.com/index.js"></script>
    </body>
</html>

JS代码，index.js部分：

// Generate data
var category = [];
var dottedBase = +new Date();
var lineData = [];
var barData = [];
var myChart = echarts.init(document.getElementById(‘bar‘));

for (var i = 0; i < 5; i++) {
    var date = new Date(dottedBase + 3600 * 24);
    category.push([
        date.getFullYear(),
        date.getMonth() + 1,
        date.getDate()
    ].join(‘-‘));
    var b = (Math.random() * 20000).toFixed(0);
    var d = (Math.random() * 20000).toFixed(0);
    barData.push(b)
    lineData.push(d + b);
}


// option
var option = {
    backgroundColor: ‘#0f375f‘,
    tooltip: {
    },
    xAxis: {
        data: category,
        show: false,
        axisLine: {
            lineStyle: {
                color: ‘#ccc‘
            }
        }
    },
    yAxis: {
        splitLine: {show: false},
        show: false,
        axisLine: {
            lineStyle: {
                color: ‘#ccc‘
            }
        }
    },
    series: [{
        name: ‘bar‘,
        type: ‘bar‘,
        barWidth: 20,
        label: {
            normal: {
                show: true,
                position: ‘top‘,
                formatter: function(num){
                    return fMoney(num.value, 0);
                }
            }
        },
        itemStyle: {
            normal: {
                barBorderRadius: 5,
                color: function(params) {
                    // build a color map as your need.
                    var lightColor = new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: ‘#14c8d4‘},{offset: 1, color: ‘#43eec6‘}]);
                    var colorList = [
                        lightColor,‘#B5C334‘,‘#FCCE10‘,‘#E87C25‘,‘#27727B‘
                    ];
                    return colorList[params.dataIndex]
                }
            }
        },
        data: barData
    }]
};

function fMoney (s, n) {  
    n = n >= 0 && n <= 20 ? n : 2;  
    //如果S为空返回0
    if (!s) {
        return 0;
    }
    s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";  
    var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1];  
    var t = "";  
    for (var i = 0; i < l.length; i++) {  
        t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");  
    }  
    return t.split("").reverse().join("");
}

 myChart.setOption(option);

　　

　

echarts-柱状图绘制


联系
我们