效果图：

代码如下：

！DOCTYPE html html head meta charset=' utf-8 ' title echart柱状图/标题/头像！-为电子艺术准备一个具备大小（宽高)的DOM-div id=' container ' style=' width : 600 px；高度' :400 px'margin: 100px auto 20px'/div脚本类型t=' text/JavaScript ' src=' http :3358 libs。百度。com/jquery/1。9 .1/jquery。量滴js '/script脚本类型=' text/JavaScript ' src=' http :http://echts。百度。com/gallery/vender/echart/echart-all-3。js '/script脚本类型=' text/JavaScript ' var DOM=document。getelementbyid .var myChart=echart。init(DOM)；option=nullvar xAxisData=[]；定义变量数据=[];for(var I=20；i 29I){ xaxisdata。推(‘2’/‘I’)；数据。推(数学。圆(数学。random()* 500)200)；} //初始option option={ title : { text : }每日成交额（万元)' }，tooltip: { trigger: 'axis '，borderColor: '#636F7F '，borderWidth : 1，backgroundColor : 'rgba(99，111，127，1 ')，text style : { color : ' # ffffff '，//fontWeight : 'bold '，fontSize : 14，}，transitionDuration :万元)'，axisPointer : { type : ' line '，lineStyle : { color : ' # 05f 41E '，width : 1，type : 'solid '，}，}，//axis port : {//坐标轴指示器，坐标轴触发有效//键入：“阴影”，//默认为直线，可选为：'线条' | '阴影'//阴影样式： {//颜色： ' # D6EAFA '，//不透明度： 0.5,//}/},},可计算： true，xaxis 3360 { data : xaxisdata。map(函数(x){ return x；})，轴标签: { text style : { color : ' # 333 '，对齐： '中心，基线： '顶部' },旋转： 20,边距： 15，}，}，yAxis: { //横向标线默认为真分割线： { show : TRUE，}，轴标签: { text style : { color : ' # 333 ' }，键入： '值'，boundaryGap : false，//分隔线线的类型splitLine: { show: true，lineStyle : { color : ' # eff 0 '，type : '虚线，} } }，series: { type: 'bar '，data: data，barWidth: 15，items tyle : { normal : { barborderradius : 20，color : new echart。梯度。渐变0，1，[{ offset: 0，color: '#37BBF8' }，{ offset: 1，color: '#2294E4' }])，//shadowColor: 'rgba(35，149，229，0.8 '，//shadowBlur: 20，区域样式： { type : ' default ' } }，}；if(option的选项类型==' object '){ mychart。设置选项(选项，真)；}/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！