echarts 饼状图(环形图) 笔记

最近项目中用到图表展示，由于项目中之前已经用到echarts，于是就在echarts中找了一个跟UI界面比较像的拿来使用。

直接上代码说项目吧。

1、先引用相关js文件，可以在script脚本中直接引用。

2、然后写相关后台接口方法，拼接成所需数据结构可供直接返回使用。

3、在JS中调用，参考实例的方法进行修改。

var initPieData = function (xAxisData, data) {
            var myChart = echarts.init(document.getElementById('main'), 'macarons');
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}: {c} ({d}%)"
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    //data: xAxisData //由于节点较多的时候 会出现遮挡现象 故暂时屏蔽
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center',

                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '25',
                                    fontWeight: 'bold'
                                },
                                formatter:'{d}%'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: data
                    }
                ]
            };
            myChart.setOption(option);
        }

4、注意事项。

1)、关于主题的修改，可在官网下载你想要的主题JS，并在调用的时候引用并传参即可（如下所示）。

      主题下载地址：http://echarts.baidu.com/download-theme.html

       

2)、默认在圆环中间展示的节点项，但是我想要展示的是百分比，所以就修改展示内容即可（红框中所示）。

好了 ，以上总结完毕，展示最终效果图。