利用Echarts绘制图表绑定数据

1. 在一个项目中往往不少于图表的绘制，而绘制图表也更能使数据呈现一个清晰明了的范畴。Echarts是一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，提供直观、生动、可交互、可高度个性化定制的数据可视化图表。今天，就让我们来学习一下Echarts绘制图表绑定数据。在绘制图表的时候一定要先引用Echarts的插件。

 

2、利用Echarts绘制图表绑定数据的时候，首先第一步得弄清楚它的关系，我们在绑定一个图表的时候，它绑定上去的时候是还不能根据表格而绑定到数据的，必须得还得通过一系列操作才能够绑定到数据。

（1）在绑定图表数据时，基于准备好的dom，初始化Echarts实例，

（2）如果存在就销毁后再次初始化。

（3）指定图表的配置项和数据

下面就是他的代码：

function DrawCharts() {

            // 基于准备好的dom，初始化echarts实例

            //Echart 饼状图

           //如果存在，就销毁后再次初始化

            if (PieChart != undefined) {

                PieChart.dispose();

            }

            PieChart = echarts.init(document.getElementById('chartOne'));

            // 指定图表的配置项和数据

            var option1 = {

                title: {

                    text: textName,

                    left: "left",

                    textStyle: {

                        fontSize: 18,

                    }

                },

                tooltip: {

                    trigger: 'item',

                    formatter: "{a}  {b} <br/>人数:{c} , 比例:{d}%"

                    //饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

                },

                legend: {

                    orient: 'vertical',//图例列表的布局朝向。'horizontal'横向   'vertical'垂直

                    left: 'right',

                    data: ["合格(90~100)", "不合格(0~89)"]

                },

                series: [

                    {

                        name: '成绩',

                        type: 'pie',//饼图

                        radius: [0, '55%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。

                        center: ['50%', '60%'],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。

                        data: [//数据

                            { value: DATA.PassNumber, name: '合格(90~100)' },

                            { value: DATA.PassFail, name: '不合格(0~89)' }

                        ]

                    }

                ]

            };

            PieChart.setOption(option1);

 

            if (PieChartDetail != undefined) {

                PieChartDetail.dispose();

            }

这样子就可以实现到页面的Echarts数据的绑定。