フロントエンドecharts実装柱状図

一、準備
jsライブラリの導入:

htmlセクション:

JS :

    //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}
{c}'
                    //limitPrice+'
'+limitAmount
                    formatter:function(params){
                    return '￥'+limitPrice[params.dataIndex]+'
'+' '+limitAmount[params.dataIndex]+' '

                    }

                }
                }
            }

        }
        ]
    };

    //                 。
    myChart.setOption(option);

この中のJS部分には、2つの知識点があります.
1.TPフレーム下の配列をJS変数に割り当てる
2.グラフのカスタマイズはすべてformatterでつなぎ合わせた後、対応するデータを返しますが、下のマークはparamsです.dataIndex.