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