效果图：
JS:
function chart(){var chartDom = document.getElementById('这里写div的id名称');var myChart = echarts.init(chartDom);var option;myChart.clear();//图表清除，用于更新数据重新加载图表option = {//编辑图表整体布局宽、高等等grid:{top:'20%',left:'20%',bottom:'20%',},//鼠标移入图表出现的提示框tooltip: {trigger: 'axis',},//图例legend: {top:'5%',//图例距离顶部的位置right:'15%',//图例距离左侧的位置icon: 'circle',//图例图标样式为圆形textStyle:{color:'#FFFFFF',//图例字体颜色},},//设置滚动条参数dataZoom: [{type: 'inside',//inside属性为内置滚动条不会出现滚动条样式，鼠标直接拖动图表实现滚动样式，需要搭配start和end参数start: 0 ,//所显示图表的开始位置end: 100 ,//所显示图表的结束位置位置//这里开始位置为0结束位置为100意思就是图表整体都显示所以不会出现滚动条，如何设置start：0；end：50；此时图表所显示的内容只有百分之50所以会显示滚动条（鼠标可以拖动图表滚动）}],//设置X轴参数xAxis: [{type: 'value',//横向滚动条X轴为值所以类型为value（同理如果为纵向滚动条这里为category，也就是说设置纵向滚动条时此参数与yAxis中的参数对调即可）axisLabel:{color:'#FFFFFF',//X轴上字体颜色（值的字体颜色）},splitLine:{lineStyle: {color:'#999999',//X轴上刻度线的颜色（不包括X轴本身样式，具体可以参考官方文档）},},}],//设置Y轴参数yAxis: [{type: 'category',//横向滚动条Y轴为类目所以此参数为category（同理如果为纵向滚动条这里为value）name: '（单位：个）',//显示在Y轴上方的文字（可以是单位说明）nameTextStyle:{color:"#EEEEEE",//显示在Y轴上方的文字的字体样式},data: ['本月金额', '本年累计金额', '上年同期累计'],//Y轴需要显示的类目名称axisLabel:{color:'#FFFFFF',,//Y轴上字体颜色},axisPointer: {type: 'shadow',//鼠标移入图表后Y轴的提示效果样式，可以删除看一下效果}}],series: [{//柱1（类型一）name: '主营业务收入',//柱状图统计类的名称type: 'bar',//类型为柱形yAxisIndex: 0,//所使用的Y轴（这个参数只在使用多个Y轴时会用到，比如折柱混合图，柱状图使用第一个Y轴也就是0，折线图使用第二个Y轴也就是1 以此类推）barWidth:15,//设置柱的宽度stack: 'total',//柱状图堆叠效果（如何使用堆叠那以下所有的柱都需要对应设置为堆叠）label: {//柱中显示值show: true,color:'#000000',//字体颜色textBorderType:'solid',//字体边框类型textBorderWidth:2,//字体边框宽度textBorderColor:'#FFFFFF',//字体边框颜色},//设置柱的参数itemStyle:{//设置柱颜色为渐变色color: new echarts.graphic.LinearGradient(0, 0, 1, 0,/*设置渐变颜色角度比如从上到下渐变或者从左往右渐变，自行调整*/ [{offset: 0, color: '#6DD400'},{offset: 1,color: '#44D7B6'}]),borderRadius:[6,6,6,6],//柱设置为圆角},//当前柱在鼠标移入图表时提示框所显示的内容tooltip: {valueFormatter: function (value) {return value + '/千万元';}},data: [56.0, 24.9, 22.22,],//此类型柱的值因为有三个类目所以是三个值以此类推},{//柱2（类型二）name: '其他业务收入',//柱状图统计类的名称type: 'bar',//类型为柱形（如果参数为line此时图表为折柱混合图）yAxisIndex: 0,barWidth:15,stack: 'total',label: {show: true,color:'#000000',textBorderType:'solid',textBorderWidth:2,textBorderColor:'#FFFFFF',},itemStyle:{color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: '#009CD7'},{offset: 1,color: '#17EAFE'}]),borderRadius:[6,6,6,6],},tooltip: {valueFormatter: function (value) {return value + '/千万元';}},data: [56.0, 24.9, 22.22,]},]};option && myChart.setOption(option);}纵向效果图：
参数对调即可：
