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>

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

 1 <script type="text/javascript">
 2        // 路径配置
 3        require.config({
 4              paths: {
 5                     'echarts': 'js/echarts',
 6                     'echarts/chart/pie': 'js/echarts'
 7               }
 8         });
 9       
10         require(
11              [
12                   'echarts',
13                   'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
14               ],
15               function(ec) {
16                   // 基于准备好的dom，初始化echarts图表
17                   var myChart = ec.init(document.getElementById('main'));
18                     
19                    option = {
20                         //代码主要部分
21               　　　};
22                    // 为echarts对象加载数据 
23                    myChart.setOption(option);
24            }
25      );
26 </script>

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

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

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

1.圆环

 1 option = {
 2      title: {
 3            text: '2017年度市级运动员统计汇总',
 4            subtext: '',
 5             x: 'center'
 6       },
 7       tooltip: {
 8             trigger: 'item',
 9             formatter: "{a} <br/>{b} : {c} ({d}%)"
10       },
11       legend: {
12             orient: 'horizontal',
13             x: 'center',
14             y: '260px',
15             data: ['普通运动员', '重点人数', '输送人数', '退役人数']
16       },
17       toolbox: {
18             show: true25       },
26       calculable: true,
27       series: [{
28             name: '访问来源',
29             type: 'pie',
30             radius: ['25%','55%'],
31             center: ['50%', '50%'],
32             data: [
33                  { value: 100, name: '普通运动员' },
34                  { value: 200, name: '重点人数' },
35                  { value: 400, name: '输送人数' },
36                  { value: 800, name: '退役人数' },
37             ]
38         }],
39         color:['#f05a4b','#f49902','#1dab91','#0078d7']
40  };

2.柱状图

 1 option = {
 2       tooltip: {
 3            trigger: 'axis'
 4       },
 5       toolbox: {
 6            feature: {
 7                 dataView: {show: true, readOnly: false},
 8                 magicType: {show: true, type: ['line', 'bar']},
 9                 restore: {show: true},
10                 saveAsImage: {show: true}
11             }
12        },
13        legend: {
14              x: 'center',
15              y: '320px',
16              data:['预计成绩','实际成绩']
17         },
18         xAxis: [
19             {
20                  type: 'category',
21                  data: ['田径','游泳','举重','网球','羽毛球','乒乓球','跆拳道']                               
22             }
23         ],
24         yAxis: [
25              {
26                    type: 'value',
27                    name: '（奖牌数）',
28               }
29         ],
30         series: [
31               {
32                    name:'预计成绩',
33                    type:'bar',
34                    data:[2,5,6,7,5,2,8],
35                    itemStyle: {
36                         //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
37                          normal: {
38                               //柱形图圆角，初始化效果
39                                barBorderRadius:[2, 2, 0, 0]
40                          }
41                     },
42                     barGap:'0%'
43            },
44            {
45                 name:'实际成绩',
46                 type:'bar',
47                 data:[5,4,10,4,5,6,4],
48                 itemStyle: {
49                       //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
50                       normal: {
51                             //柱形图圆角，初始化效果
52                             barBorderRadius:[2,2, 0, 0]
53                       }
54                 },
55                 barGap:'0%'
56             }
57       ],
58       color:['#0078d7','#f49902']
59  };

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

 myChart.setOption(option);

运行效果图：

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