一、引入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)]
})