前端 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。