总结echarts的常用手法

做了个项目，在报表管理这一块，用到图形化报表。由于echarts是百度开源免费的组件，所以使用echarts作为报表的工具，非常简单好用、也有很多例子、用法很容易找到，笔者也是网上各种搜索，完成了任务，以下仅是用法的一些总结，方便以后查阅。

一：首先去官网下载echarts的js文件，http://echarts.baidu.com/   官网也有非常多的例子。

二：把echarts.js 放入到我们的项目，然后在我们的页面中引用该文件，具体方式也不必多说。

三：定义dom，我发现使用echarts  你得在dom中定义其宽或者高，两者必须有其一，否则会报错。

四：最重要的编写js环节。本文以饼图和柱状图为例，其他组件也差不多。上代码

         // 柱状图
         var bar = {
             title: {
                 text: '报表1'
             },
             tooltip: {},
             legend: {
                 data:xarray
             },
             xAxis: {
                 type: 'category',
                 data:xarray,
                 axisLabel: {  
                     interval:0,  
                     rotate:20  
                  }  
             },
             yAxis: {
                 type: 'value'
             },
             series: [{
                 name: '数量',
                 type: 'bar',
                // barWidth:30,
                 data:yarray
             }],
         };

         // 基于准备好的dom，初始化echarts实例
         var echart1 = echarts.init(document.getElementById('rightBar'));
         
         // 使用刚指定的配置项和数据显示图表。
         echart1.setOption(bar);

其实看变量也大概知道一些，值得一看的是，xaxis的axisLabel属性、因为我做的时候，有的名字很长，导致我的x左边根本放不下那么多字，所以我用了这个属性，interval为强制显示每一个x值，rotate为 倾斜20度，度数可以自行调整，倾斜之后可以完美看到效果。

另外我们看到series属性下有name、type、data等属性，name可以理解为，该控件名称，echarts可以让你鼠标放在控件上方会显示该控件名称，type："bar" 表明我让它以柱状图的形式呈现，barWidth为每个柱子的宽度，当然，它本身是自适应的，如果觉得不合适，可以写死宽度。data就是数据。可以理解为y轴数据，通常是一个数组，我定义成我自己写的yarray  这个数组是我通过ajax 请求 后台拿到的数据，push到yarray中的。

以下是饼图示例：

        var rightPie = {
             title: {
                 text: '饼图示例'
             },
             tooltip : {
                 trigger: 'item',
                 formatter: "{a}
{b} : {c} ({d}%)"
             },
              legend: {
                 orient: 'vertical',
                 top: 'right',
                 data:xarray
             },
             series: [{
                 name: '数量',
                 type: 'pie',
                // barWidth:30,
                 data:dataArray
             }]
         };

         // 基于准备好的dom，初始化echarts实例
         var rightChart = echarts.init(document.getElementById('rightPie'));
         
         // 使用刚指定的配置项和数据显示图表。
         rightChart.setOption(rightPie);

其实具体用法是万变不离其宗，值得注意的是因为饼图它不像柱状图、折线图这种有x、y坐标，它的数据都是放在一个键值对里，所以我定义了一个dataArray这个数组，这个数组的每一个元素都是一个map，map里有 name、value两个属性、name表示每一块扇区的名称、value为扇区对应的值，然后pie组件会帮你自动计算它所占的比例。我们要传的仅是这两个值。

还有一个属性值得注意的是：tooltip属性下的formatter:"{a}
{b} : {c} ({d}%)"

 {a} 是这个饼图的name值  我设置那个为：“数量”

 {b}是当前扇区的name值   即dataArray中的name属性的值

 {c} 是当前扇区的value值，即dataArray中的value属性的值

 {d}是当前扇区所占的比例，这个比例由echarts计算

echarts还有很多属性，具体可以查看官方文档：http://echarts.baidu.com/echarts2/doc/doc.html

非常有用