echarts 圆形图、柱状图-白红宇

echarts 圆形图、柱状图

阅读量：5270 次

发布时间：2019-06-14

本文共 3155 字，大约阅读时间需要 10 分钟。

首先引入echarts的js包

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

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

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

　　下面这个链接是echarts官网的一个例子链接，

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

1.圆环

1 option = { 2      title: { 3            text: '2017年度市级运动员统计汇总', 4            subtext: '', 5             x: 'center' 6       }, 7       tooltip: { 8             trigger: 'item', 9             formatter: "{a} 
{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  };

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