实现简单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);

实现简单echart

标签：

原文地址：http://www.cnblogs.com/shenli/p/5892110.html