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)]
})