- 在一个项目中往往不少于图表的绘制，而绘制图表也更能使数据呈现一个清晰明了的范畴。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数据的绑定。
