echarts-柱狀圖繪製

時間 2019-11-29

標籤 echarts 柱狀繪製简体版

原文原文鏈接

又接到一個展現數據的活，看了下就是些柱狀圖，按照UI的要求繪製了一個簡單的Demojavascript

第一次用echarts繪製統計圖，記錄下css

把圖表展示出來：html

<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);

按照要求，柱狀是要有圓角的：java

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

每一個柱子上面是有數字顯示的，並且數字是有千分位符號的：echarts

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("");
}

每一個柱子的顏色都是不同的，柱子的顏色是能夠漸變的：dom

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代碼：ui

<!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="./index.js"></script>
    </body>
</html>

JS代碼，index.js部分：spa

// 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);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。