Echarts动态加载柱状图的实例

一、引入echarts.js文件（下载页:http://echarts.baidu.com/download.html）

二、HTML代码：

<div style="width: 100%; height: 400px;" id="main">
</div>

三、js代码（加载图表的方法）：

/**
* @param {String} p_chart 初始化报表的id
* @param {Object} p_obj 初始化报表的数据对象
* @param {String} p_obj.xAxis 初始化报表x轴的数据
* @param {String} p_obj.serise 初始化报表的数据列值
*/
function _loadChart(p_chart, p_obj) {    // 加载图表的方法
    if(this[p_chart]) {    // 判断该图表是否存在，存在即只替换值
         var option = {
             xAxis: {
                  data: p_obj.xAxis
             },
             series: {
                 data: p_obj .series,
                 markPointer:  {
                     data: [
                         {
                              value: p_obj.series[0],
                              xAxis: 0,
                              yAxis: p_obj.series[0]
                         },
                         {
                              value: p_obj.series[0],
                              xAxis: 0,
                              yAxis: p_obj.series[0]
                         }
                     ]
                 }
             }
          }      
    } else {
        var option = {
            tooltip: {
                trigger: 'item',
                axisPointer: {    // 坐标轴指示器，坐标轴触发有效   
                    type: 'shadow'    // 默认为直线，可选‘line | shadow’
                }
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                top: 10,
                axisTick: false,    // 坐标轴小标记，默认为true
                axisLabel: {
                    textStyle: {
                        color: '#CCC',
                        fontSize: 12,
                        fontFamily: 'Microsoft YaHei'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#00F3FF'
                    }
                },
                data: p_obj.xAxis
            }],
            yAxis: [{
                type: 'value',
                axisTick: false,
                axisLabel: {
                    textStyle: {
                        color: '#CCC',
                        fontSize: 12,
                        fontFamily: 'Microsoft YaHei'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#00F3FF'
                    }
                },
                spllitLine: false    // y轴分割线，默认为true
            }],
            series: [{
                name: '实有人口',
                type: 'bar',
                barWidth: 20,
                itemStyle: {
                    normal: {
　　　　　　　　　　　　　　barBorderRadius: 30,    //柱子的圆角
                        color: new echarts.graphic.LinearGradient(    //柱子的渐变色
                              0, 0, 0, 1, [{
                                  offset: 0,
                                  color: 'rgba(249, 241, 4, 1)'
                              },
                              {
                                  offset: 1,
                                  color: 'rgba(249, 241, 4, 0)'
                              }]  
                        )
                    }  
                },
                data: p_obj.series,
                markPointer:  {    // 柱状图上方气泡值
                     data: [
                         {
                              value: p_obj.series[0],
                              xAxis: 0,
                              yAxis: p_obj.series[0]
                         },
                         {
                              value: p_obj.series[0],
                              xAxis: 0,
                              yAxis: p_obj.series[0]
                         }
                     ]
                 }
            }]     
        };
        
         this[p_chart] = echarts.init(document.getElementById(p_chart));    
    }

     this[p_chart].setOption(option);    // 设置报表数据
}

 

 四、js方法（调用加载图表的方法）：

_loadChart("main", {
    xAxis: ['车辆卡口', '人员卡口'],
    series: [(Math.random() * 100).toFixed(0), (Math.random() * 100).toFixed(0)]
})