参考：http://www.cnblogs.com/bubbleStar/p/6070166.html
<!DOCTYPE html> <html> <header> <meta charset="utf-8"> <!--引入 ECharts 文件--> <script src="echarts.js"></script> </header> <body> <!--为 ECharts 准备一个具备大小（宽高）的 DOM--> <div id="main" style=" 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); option = { //x轴 xAxis: { data: ["苹果", "小米", "华为", "其他"] }, //y轴 yAxis: { splitLine: {show: false} //改设置不显示坐标区域内的y轴分割线 }, //数据 series: [{ name: '手机品牌', type: 'bar', data: [19, 15, 40, 32], //设置柱子的宽度 barWidth: 30, //配置样式 itemStyle: { //通常情况下： normal: { //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组 color: function (params) { var colorList = ['rgb(164,205,238)', 'rgb(42,170,227)', 'rgb(25,46,94)', 'rgb(195,229,235)']; return colorList[params.dataIndex]; } }, //鼠标悬停时： emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }], //控制边距 grid: { left: '0%', right: '10%', containLabel: true, } }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html>