Echarts動態加載柱狀圖和折線圖混合展示的實例

一、引入echarts文件：

<script type="text/javascript" src="echarts.js"></script>

二、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.barData 初始化報表的柱狀圖數據列值
* @param {String} p_obj.lineData 初始化報表的折線圖數據列值
*/
function _loadChart(p_chart, p_obj) {    // 加載圖表的方法
    if(this[p_chart]) {    // 判斷該圖表是否存在，存在即只替換值
         var option = {
             xAxis: {
                  data: p_obj.xAxis
             },
             series: {[
　　　　　　　　　　{data: p_obj.barData},
　　　　　　　　　　{data: p_obj.lineData}
             ]}
          }      
    } else {
        var option = {
            tooltip: {
                trigger: 'item',
                axisPointer: {    // 坐標軸指示器，坐標軸觸發有效   
                    type: 'shadow'    // 默認為直線，可選‘line | shadow’
                }
            },
            calculable: true,
            legend: {
                show: true,
                orient: 'horizontal',
                x: 'right',       //x軸方向上的位置
                y: 'top',    //y軸方向上的位置
                textStyle: {
                    color: '#2DFCFF',
                    fontSize: 14,
                    fontFamily: 'MicroSoft YaHei'
                },
                itemGap: 20    //legend之間的間距，默認為10
            },
            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
            },{
                show: false
            }],
            series: [{
                name: '實有人口',
                type: 'bar',
                yAxisIndex: 0,    // 對應y軸（yAxis）第一組數據
                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.barData
            },{
                name: '報警數',
                type: 'line',    // 折線圖
                yAxisIndex: 1,    // 對應y軸（yAxis）第二組數據
                symbol: 'emptyCircle',    // 標記的圖形,包括'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'，也可以通過'image://url'設置為圖片。可以通過 'path://'將圖標設置為任意的矢量路徑。
                symbolSize: 10,    //標記的大小。可以設置成諸如 10 這樣單一的數字，也可以用數組分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
                label: {
                    normal: {
                        show: false,
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                       color: '#FAE200'
                    }
                },
                lineStyle: {    //線條樣式
                    normal: {
                       width: 3,
                       shadowColor: 'rgba(0, 0, 0, 0.4)',   //陰影顏色
                       shadowBlur: 10,    //圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。
                       shadowOffsetY: 10    //陰影垂直方向上的偏移距離
                    }
                },
　　　　　　　　　data: p_obj.lineData
              }]     
        };
        
         this[p_chart] = echarts.init(document.getElementById(p_chart));    
    }

     this[p_chart].setOption(option);    // 設置報表數據
} 

 

 四、JS方法（調用加載圖表方法）：

_loadChart("main", {
    xAxis: ['車輛卡口', '人員卡口'],
    barData: [(Math.random() * 100).toFixed(0), (Math.random() * 100).toFixed(0)],
    lineData: [(Math.random() * 100).toFixed(0), (Math.random() * 100).toFixed(0)]
})