ECharts01.png
ECharts02.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="/Scripts/echarts-2.2.7/build/dist/echarts.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="height: 400px; border: 1px solid #ccc; padding: 10px;">
</div>
<script type="text/javascript" language="javascript">
// 按需加载
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths: {
echarts: '/Scripts/echarts-2.2.7/build/dist' //echarts.js的路径
}
});
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar' // **
],
// 回调函数
DrawEChart
);
// 渲染ECharts图表
function DrawEChart(ec) {
// 图表渲染的容器对象
var chartContainer = document.getElementById("chart");
// 加载图表
var myChart = ec.init(chartContainer);
myChart.setOption({
title : {
text: '题目分组分析', // **
subtext: '按照试卷每一小题'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['平均分','整体平均分'] // **图例配置
},
toolbox: {
show : true,
feature : {
// mark : {show: true},
dataView : {show: true, readOnly: false},
// magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data: ['六哨中学', '先锋中学'] // **x轴配置
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name: '平均分',
type: 'bar',
itemStyle: {
normal: {
label: {
show: true
}
}
},
data: [3.42, 3.4] // **图表数据序列
}
,
{
name: '整体平均分',
type: 'line',
itemStyle: {
normal: {
label: {
show: true
}
}
},
data: [3.28,3.28]
}
]
});
}
</script>
</body>
</html>
