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的路徑霹娄，從當(dāng)前頁面鏈接到echarts.js荧关，定義所需圖表路徑
require.config({
paths: {
echarts: '/Scripts/echarts-2.2.7/build/dist' //echarts.js的路徑
}
});
// Step:4 動態(tài)加載echarts然后在回調(diào)函數(shù)中開始使用峭状，注意保持按需加載結(jié)構(gòu)定義圖表路徑
require(
[
'echarts',
'echarts/chart/scatter' // ** 散點圖
],
// 回調(diào)函數(shù)
DrawEChart
);
// 渲染ECharts圖表
function DrawEChart(ec) {
// 圖表渲染的容器對象
var chartContainer = document.getElementById("chart");
// 加載圖表
var myChart = ec.init(chartContainer);
myChart.setOption({
title: {
text: '學(xué)生學(xué)業(yè)水平評價',
},
tooltip: {
trigger: 'axis',
showDelay: 0,
formatter: function (params) {
if (params.value.length > 1) {
return params.value[2] + '<br/>'
+ '卷面分?jǐn)?shù)：' + params.value[3] + ' <br/>'
+ '得分率：' + params.value[1] + '%<br/>'
+ '粗心度：' + params.value[0];
}
},
axisPointer: {
show: true,
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
}
}
},
legend: {
data: ['學(xué)生']
},
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: '學(xué)生',
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>
