开发工具与关键技术: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 + "安全教育测试成绩分析图";
给它起个名字,在获取到学院名称时会动态刷新表头名称。