<!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body > <div id="container" style="height: 500px"></div> <!-- V型知识库 www.vxzsk.com --> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; var option = null; app.title = '坐标轴刻度与标签对齐'; // 处理点击事件并且跳转到相应的结束 myChart.on('click', function (params) { alert(params.componentType); if (params.componentType === 'series') { alert("点击事件"+params.seriesType); } //window.open('https://www.baidu.com/s?wd='); }); // 处理点击事件并且跳转到相应的百度搜索页面 option = { color: ['#3398DB'], tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } } ], yAxis : [ { type : 'value' } ], series : [ { name:'直接访问', type:'bar', barWidth: '60%', data:[10, 52, 200, 334, 390, 330, 220], itemStyle: { normal: { color: function(params) { // build a color map as your need. var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63' ]; return colorList[params.dataIndex] } } }, label:{ normal:{ show: true, position: 'top'} } } ] }; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>