引入echarts.js。
下载地址:http://echarts.baidu.com/download.html
开发建议下载源代码
* @param tbListId 生成列表的id(必须赋值宽和高) * @param title 标题 * @param xListDate 横坐标的显示(数组类型) * @param yListDate 横坐标对应的数据(数组类型) * @param colName 鼠标悬停矩形上的名字 */ function generateTableView(tbListId,title,xListDate,yListDate,colName){ var myChart = echarts.init(document.getElementById(tbListId)); var option = { title:{ text:title, }, color: ['#3398DB'], tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', // data : ['星期一', '星期一', '星期一', '星期一', '星期一', '星期一', '星期一'], data : xListDate, axisTick: { alignWithLabel: true } } ], yAxis : [ { type : 'value' } ], series : [ { name:colName, type:'bar', barWidth: '60%', // data:[0, 0, 10, 0, 0, 0,1 ] data:yListDate } ] }; myChart.setOption(option); }
传入对应的参数就可以了。