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="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: true25       },
      calculable: true,
      series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['25%','55%'],
            center: ['50%', '50%'],
            data: [
                 { value: 100, name: '普通运动员' },
                 { value: 200, name: '重点人数' },
                 { value: 400, name: '输送人数' },
                 { value: 800, 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);

运行效果图：

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