实现简单echart

实例：http://echarts.baidu.com/demo.html

API：http://echarts.baidu.com/api.html#echarts

配置项：http://echarts.baidu.com/option.html#title

第一步：链入js文件

<script type="text/javascript" src="${pageContext.request.contextPath}/struts/market/js/echarts.min.js"></script>

第二步：为表格设置一个固定宽高的div
第三步：获得到这个div，初始化echart

var myChart1 = echarts.init(document.getElementById(‘income‘));

第四步：表格内容：

income = {      backgroundColor:‘#fff‘,

//    title:{//       text:‘收入‘,//       right:‘5‘//    },      tooltip : {         trigger: ‘axis‘,         axisPointer : {            // 坐标轴指示器，坐标轴触发有效            type : ‘shadow‘        // 默认为直线，可选为：‘line‘ | ‘shadow‘         },         formatter: function (params) {            var tar;            for(var i=0;i<params.length;i++){               if(params[i].value){                  tar = params[i];                  break;               }            }            return  tar.seriesName + ‘ : ‘ + tar.value;         }      },

      legend: {         data:[‘2014-Q1‘,‘2014-Q2‘,‘2014-Q3‘,‘2014-Q4‘,‘2015-Q1‘]      },      grid: {         left: ‘3%‘,         right: ‘4%‘,         bottom: ‘3%‘,         containLabel: true,

      },      xAxis : [         {            type : ‘category‘,

            data : [‘2014-Q1‘,‘2014-Q2‘,‘2014-Q3‘,‘2014-Q4‘,‘2015-Q1‘],            splitLine:{               show:false            },            axisTick:{               show:false,               lineStyle:{                  color:‘#B2B2B2‘               }            },            axisLabel: {               show: true,               textStyle: {                  color: ‘#B2B2B2‘               }            },            axisLine:{               show:‘true‘,               lineStyle:{                  color:‘#B2B2B2‘,                  width:0.3               }            }         }      ],      yAxis : [         {            type : ‘value‘,            name: ‘亿元‘,            min: 0,            max: 10,            interval: 2,            splitLine:{               show:false            },            splitNumber:‘6‘,            axisTick:{               interval:‘100‘,               lineStyle:{                  color:‘#B2B2B2‘               }            },            splitLine:{               show:true,               lineStyle:{                  color:"#B2B2B2",width:0.3               }            },            axisLabel: {               show: true,               textStyle: {                  color: ‘#B2B2B2‘               }            },            axisLine:{               show:‘true‘,               lineStyle:{                  color:‘#B2B2B2‘,                  width:0.3               }            }         }      ],      series : [         {            name:‘一级‘,            type:‘bar‘,            barWidth:40,            stack: ‘总量‘,            legendHoverLink:false,            data:[1.49,0,0,0,0],            itemStyle: {               normal: {                  color: ‘#53A0E9‘               }            },            label:{               normal:{                  show:true,                  position:‘top‘               }            }         },         {            name:‘二级‘,            type:‘bar‘,            stack: ‘总量‘,            legendHoverLink:false,            data:[,3.62,0,0,0],            itemStyle: {               normal: {                  color: ‘#B1DBFB‘               }            },            label:{               normal:{                  show:true,                  position:‘top‘               }            }         },         {            name:‘三级‘,            type:‘bar‘,            stack: ‘总量‘,            legendHoverLink:false,            data:[,,5.83,0,0],            itemStyle: {               normal: {                  color: ‘#1941A8‘               }            },            label:{               normal:{                  show:true,                  position:‘top‘               }            }         },         {            name:‘四级‘,            type:‘bar‘,            stack: ‘总量‘,            legendHoverLink:false,            data:[,,,8.11,0],            itemStyle: {               normal: {                  color: ‘#B1E495‘               }            },            label:{               normal:{                  show:true,                  position:‘top‘               }            }         },         {            name:‘五级‘,            type:‘bar‘,            stack: ‘总量‘,            legendHoverLink:false,            data:[,,,,2.17],            itemStyle: {               normal: {                  color: ‘#3FC2D5‘               }            },            label:{               normal:{                  show:true,                  position:‘top‘               }            }         },

      ]   };

第五步：将表格内容注入到div中

myChart1.setOption(income);