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