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日