echarts 写一个柱状表图

今天在项目中需要写一个图示展示数据，然后项目中用的echarts 插件，本人没写过图示，第一次写，然后中间有问题去查找，感觉有点用，记录一下，以后用好找！

页面代码：

<div class="white-box">
   <!-- 表格 -->
   <div id="main" style="width: 1500px;height:700px;"></div>
</div>

没错，只需要有个状你画出来的图的div就行了！

js:

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

var category_data=["普通票全价票","普通票半价票","团体票全价票","团体票半价票","网络票","TVM票","免费票"];
var newyearDate=[];//1
var oldyearDate=[];//2
var newMonthDate=[];//3
var oldMonthDate= [];//4

$.ajax({
    url: "${ctx}/statistical/SalesComparison/comparison/date",
    method: 'post',  //请求方法
    dataType: "json",  //类型json
    async: false,//设置为同步，不然newyearDate在ajax中有时间，但是在ajax外使用的时候还是为空
    success:function(date){
        date.forEach(function(item,i){
           //取得数据的逻辑代码
            if(item.status=='1'){
                if(item.generalAllCount=='null' || typeof(item.generalAllCount)=='undefined'){
                    newyearDate.push(0);
                }else{
                    newyearDate.push(item.generalAllCount);
                }
                
            }

        })
    },error:function (date) {
        
    }
})
// 指定图表的配置项和数据
var option = {
    title: {
        text: '销售情况对比图示'
    },
    tooltip: {},
    legend: {
        data:['同比','环比'],
        color:['#da70d6','#C0FF3E'],
        selected: {
            '环比': false //初始化时不想显示的都设置成false，不然的话可以不要这个属性
        }
        },
    xAxis: [{
        data:category_data
    }],
    yAxis: [{
        type : 'value' //y轴显示数据值
    }],
    series : [{
        name: '同比',
        type: 'bar',
        itemStyle: {
            normal: {
                label: {
                    show: true,       //开启显示
                    position: 'top',   //在上方显示
                    textStyle: {       //数值样式
                        color: 'black',
                        fontSize: 10
                    },
                    formatter: '{c}'+'(当年)'// {c}:data中的数据
                }
            }
        },
        data: newyearDate,
        color:"#da70d6"
    },{
        name: '同比',
        type: 'bar',
        itemStyle: {
            normal: {
                label: {
                    show: true,       //开启显示
                    position: 'top',   //在上方显示
                    textStyle: {       //数值样式
                        color: 'black',
                        fontSize: 10
                    },
                    formatter: '{c}'+'(上一年)'
                }
            }
        },
        data: oldyearDate,
        color:"#87cefa"
    },{
        name: '环比',
        type: 'bar',
        itemStyle: {
            normal: {
                label: {
                    show: true,       //开启显示
                    position: 'top',   //在上方显示
                    textStyle: {       //数值样式
                        color: 'black',
                        fontSize: 10
                    },
                    formatter: '{c}'+'(当月)'
                }
            }
        },
        data: newMonthDate,
        color:"#C0FF3E"
    },{
        name: '环比',
        type: 'bar',
        itemStyle: {
            normal: {
                label: {
                    show: true,       //开启显示
                    position: 'top',   //在上方显示
                    textStyle: {       //数值样式
                        color: 'black',
                        fontSize: 10
                    },
                    formatter: '{c}'+'(上一月)'
                }
            }
        },
        data: oldMonthDate,
        color:"#DB7093"
    }
    ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

 

效果图

一个简单地echarts柱状表格就实现了。