Echarts图表之柱状图-CFANZ编程社区

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>Echarts图表</title>
       
       <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
   </head>
   <body>
       <div id="main" style="width: 600px;height:400px;"></div>
       <script type="text/javascript">
           var myChart = echarts.init(document.getElementById('main'));
           var option = {
               color: ['#7ecef4'],
               backgroundColor: '#000',
               grid: {
                   left: 20,
                   rigth: 20,
                   top: 13,
                   bottom: 6,
                   containLabel: true
               },
               //x轴
               xAxis: {
                   //坐标轴类型,'value'数值轴,适用于连续数据
                   type: 'value',
                   //坐标轴线
                   axisLine: {
                       //坐标轴线的样式
                       lineStyle: {
                           color: 'rgba(255,255,255,.2)'
                       }
                   },
                   //坐标轴在 grid 区域中的分隔线
                   splitLine: {
                       lineStyle: {
                           color: 'rgba(255,255,255,0)'
                       }
                   },
                   //坐标轴刻度标签的相关设置
                   axisLabel: {
                       color: 'rgba(255,255,255,0)'
                   },
                   //坐标轴两端空白策略，数组内数值代表百分比
                   boundaryGap: [0, 0.01]
               },
               yAxis: {
                   // 类目轴
                   type: 'category',
                   axisLine: {
                       lineStyle: {
                           color: 'rgba(255,255,255,.5)'
                       }
                   },
                   splitLine: {
                       lineStyle: {
                           color: 'rgba(255,255,255,.1)'
                       }
                   },
                   axisLabel: {
                       color: 'rgba(255,255,255,.5)'
                   },
                   data: ['未调节', '调节中', '未调节']
               },
               series: [{
                   naem: '2011年',
                   //类型为柱形
                   type: 'bar',
                   //柱形的宽度
                   barWidth: 30,
                   //图形样式，normal是图形在默认状态下的样式
                   itemStyle: {
                       normal: {
                           //背景渐变内置生成器
                           color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
                                   //偏移
                                   offset: 0,
                                   color: 'rgba(230,253,139,.7)'
                               },
                               {
                                   offset: 1,
                                   color: 'rgba(41,220,205,.7)'
                               }
                           ])
                       }
                   },
                   data: [18203, 23489, 29034]
               }]
           };
           myChart.setOption(option);
       </script>
   </body>
</html>