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