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/scatter' // ** 散点图
],
// 回调函数
DrawEChart
);
// 渲染ECharts图表
function DrawEChart(ec) {
// 图表渲染的容器对象
var chartContainer = document.getElementById("chart");
// 加载图表
var myChart = ec.init(chartContainer);
myChart.setOption({
title: {
text: '学生学业水平评价',
},
tooltip: {
trigger: 'axis',
showDelay: 0,
formatter: function (params) {
if (params.value.length > 1) {
return params.value[2] + '<br/>'
+ '卷面分数：' + params.value[3] + ' <br/>'
+ '得分率：' + params.value[1] + '%<br/>'
+ '粗心度：' + params.value[0];
}
},
axisPointer: {
show: true,
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
}
}
},
legend: {
data: ['学生']
},
toolbox: {
show: true,
feature: {
// mark: { show: true },
// dataZoom: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [
{
name: "粗心度",
type: 'value',
max: 1,
min: 0,
scale: true,
axisLabel: {
formatter: '{value} ' // **
}
}
],
yAxis: [
{
name: "得分率",
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} %' // **
}
}
],
series: [
{
name: '学生',
type: 'scatter',
data: [[0.37, 56, '刘娅蓉', 67], [0.79, 21, '兰昌海', 25], [0.37, 53, '诸丕双', 63], [0.53, 43, '高鹏', 52], [0.53, 40, '杨双骄', 48]
],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
}
]
});
}
</script>
</body>
</html>
