echarts 简单使用

最近在学校使用echarts遇到的一个小知识点。有一定的特殊性…
{
“clause”:[“保护费”,”花费”],”保护费”:[“100.5”,”150”,”116.5”,”321”,”54”,”22”,”111”,”321”,”132”,”122”,”90”,”87”],”花费”:[“200.5”,”120”,”276.5”,”666”,”321”,”167”,”238”,”543”,”234”,”156”,”455”,”321”]
}
这是后台自己封装的json格式 clause 为所有统计的项目。后面是具体某个统计项12个月的数值。
然后就是在前台做数据填充。

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

$.ajax({
    type:'post',
    url:'springmvc请求',
    dataType:"json",
    success:function(result){
        setBarOption(myChart,result);
    }
});

function setBarOption(id,data){
    // 指定图表的配置项和数据
    var commonBarOption = {
        tooltip : {
            ....略
        },
        legend: {
            data:data.clause //展示标题
        },
        grid: {
            ...略
        },
        xAxis : [
            {
                type : 'category',
                data : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : showMessageBar(data)
    };
    // 使用刚指定的配置项和数据显示图表。
    id.setOption(commonBarOption);
}
//数据展示 参考和借鉴了很多大神的代码。。嘿嘿。。
function showMessageBar(data){
    var serie = [];
    var len = Object.keys(data).length;// 获得data数据长度
    for(var i = 0; i < (len-1); i++){  // 因为clause为统计项。所有少一次遍历
        var item = {
            name:data.clause[i],
            type:'bar',
            data:data[data.clause[i]]
        }
        serie.push(item);
    };
    return serie;
}

参考和借鉴了很多大神的代码。。嘿嘿。。 有能让我等小程序猿获益良多~！
By Autumn 2017年5月31日