echarts 圆形图、柱状图

首先引入echarts的js包

<script type="text/javascript" src="js/esl.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>

然后先准备一个容器，存放echarts画好的图，也就是定义一个存放canvas画布div

<div id="main" style="width:100%;height:350px;></div>

接下来路径配置和开始画之前的一些准备，

 <script type="text/javascript">
        // 路径配置
        require.config({
              paths: {
                     'echarts': 'js/echarts',
                     'echarts/chart/pie': 'js/echarts'
               }
         });

         require(
              [
                   'echarts',
                   'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
               ],
               function(ec) {
                   // 基于准备好的dom，初始化echarts图表
                   var myChart = ec.init(document.getElementById('main'));

                    option = {
                         //代码主要部分
               　　　};
                    // 为echarts对象加载数据
                    myChart.setOption(option);
            }
      );
 </script>

接下来就在    option={}； 这里面写最重要的代码部分 

　　下面这个链接是echarts官网的一个例子链接，http://echarts.baidu.com/demo.html#bar-stack

另外附上一段我自己写的圆环和柱状图：

1.圆环

 option = {
      title: {
            text: '2017年度市级运动员统计汇总',
            subtext: '',
             x: 'center'
       },
       tooltip: {
             trigger: 'item',
             formatter: "{a} <br/>{b} : {c} ({d}%)"
       },
       legend: {
             orient: 'horizontal',
             x: 'center',
             y: '260px',
             data: ['普通运动员', '重点人数', '输送人数', '退役人数']
       },
       toolbox: {
             show: true       },
       calculable: true,
       series: [{
             name: '访问来源',
             type: 'pie',
             radius: ['25%','55%'],
             center: ['50%', '50%'],
             data: [
                  { value: , name: '普通运动员' },
                  { value: , name: '重点人数' },
                  { value: , name: '输送人数' },
                  { value: , name: '退役人数' },
             ]
         }],
         color:['#f05a4b','#f49902','#1dab91','#0078d7']
  };

2.柱状图

 option = {
       tooltip: {
            trigger: 'axis'
       },
       toolbox: {
            feature: {
                 dataView: {show: true, readOnly: false},
                 magicType: {show: true, type: ['line', 'bar']},
                 restore: {show: true},
                 saveAsImage: {show: true}
             }
        },
        legend: {
              x: 'center',
              y: '320px',
              data:['预计成绩','实际成绩']
         },
         xAxis: [
             {
                  type: 'category',
                  data: ['田径','游泳','举重','网球','羽毛球','乒乓球','跆拳道']
             }
         ],
         yAxis: [
              {
                    type: 'value',
                    name: '（奖牌数）',
               }
         ],
         series: [
               {
                    name:'预计成绩',
                    type:'bar',
                    data:[2,5,6,7,5,2,8],
                    itemStyle: {
                         //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                          normal: {
                               //柱形图圆角，初始化效果
                                barBorderRadius:[2, 2, 0, 0]
                          }
                     },
                     barGap:'0%'
            },
            {
                 name:'实际成绩',
                 type:'bar',
                 data:[5,4,10,4,5,6,4],
                 itemStyle: {
                       //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                       normal: {
                             //柱形图圆角，初始化效果
                             barBorderRadius:[2,2, 0, 0]
                       }
                 },
                 barGap:'0%'
             }
       ],
       color:['#0078d7','#f49902']
  };

最后别忘了这一句，很重要，要不然就显示不出来了。

 myChart.setOption(option);

运行效果图：

==================================================================================================================