动态echarts图表

开发工具与关键技术：vs mvc
作者：
撰写时间：2019年6月 23日

这篇的主要内容是用插件来制造动态图表，首先用到的插件是Echarts，下载后并将路径引用到HTML中，开始绘制图表，有许多不同类型的图表，并饼状图、折线图、柱状图等等，那么我不会演示完这几种图表。接着要做的是按照它的基础配置来完成这些图表的样式，接着将数据信息连接进图表中完成动态图表。
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}
人数:{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);
完成后的动态饼状图：

//1.6 获取统计数据
function SearchStatisticsData(AcademeID, GradeID, ClassID) {
var Academe = $("#sltAcademe option:selected").text();//学院
var Grade = $("#sltGrade option:selected").text();//年级
var Class = $("#sltClass option:selected").text();//班级
if (AcademeID == 0) {
Academe = “全校”;
}

         }//统计图的主标题文本
         textName = Academe + Grade + "级" + Class + "安全教育测试成绩分析图";

给它起个名字，在获取到学院名称时会动态刷新表头名称。