前端 echarts實現柱狀圖

一、準備工作

引入js庫：

<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts-en.common.js"></script>

html部分：

<div id="main"></div>

JS部分 ：

<script type="text/javascript">

    //tp模板把數組賦值給js變量
    function transArr(obj) {
        var tem=[];
        $.each(obj, function(i) {
            tem[i]=obj[i];
        });
        return tem;
    }

    var limitPrice = transArr({$limit_price|json_encode=true});

    var limitAmount = transArr({$limit_Amount|json_encode=true});

    // 基於準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定圖表的配置項和數據
    var option = {
        title: {

        },
        tooltip: {
            showContent:false,
        },
        grid:{
            x:30,
            y:30,
            x2:40,
            y2:20,

        },
        legend: {
            x:'right',
            data:['價格'],
            formatter:  function(name){
                return name + '/限購數量';
            }
        },
        xAxis: {
            name:'等級',
            splitLine:{show: false},
            axisTick:{show:false},
            axisLine:{
                lineStyle:{
                    width:2
                }
            },
            data: ["普通","VIP1","VIP2","VIP3","VIP4","VIP5"]
    //
        },
        yAxis: {

        axisTick:{show:false},
        interval:1000,
        splitLine:{show:false},
        axisLine:{
        lineStyle:{
            width:2
        }
        }

        },
        series: [{

            name: '價格',
            type: 'bar',
            data: limitPrice,
            itemStyle:{
                normal:{
                color: function(params) {
                    // build a color map as your need.
                    var colorList = [
                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                    ];
                    return colorList[params.dataIndex]
                },
                    //以下爲是否顯示，顯示位置和顯示格式的設置了
                label: {
                    show: true,
                    position: 'top',
                    //'{b}\n{c}'
                    //limitPrice+'\n'+limitAmount
                    formatter:function(params){
                    return '￥'+limitPrice[params.dataIndex]+'\n'+'限'+limitAmount[params.dataIndex]+'件'

                    }

                }
                }
            }

        }
        ]
    };

    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);
</script>

這裏面的JS部分，有兩個知識點：

1.TP框架下的把數組賦值給JS變量

2.圖表的自定義都是用的formatter進行拼接後，再返回相應數據，而下標則爲:params.dataIndex。