<!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'
],
// 回调函数
DrawEChart
);
// 渲染ECharts图表
function DrawEChart(ec) {
// 图表渲染的容器对象
var chartContainer = document.getElementById("chart");
// 加载图表
var myChart = ec.init(chartContainer);
myChart.setOption({
// 图表标题
title: {
text: "题型分析", // ** 正标题
link: "#", // 正标题链接 点击可在新窗口中打开
x: "center", // 标题水平方向位置
subtext: "", // 副标题
sublink: "#", // 副标题链接
// 正标题样式
textStyle: {
fontSize:24
},
// 副标题样式
subtextStyle: {
fontSize:12,
color:"red"
}
},
// 数据提示框配置
tooltip: {
trigger: 'axis' // 触发类型,默认数据触发,见下图,可选为:'item' | 'axis' 其实就是是否共享提示框
},
// 图例配置
legend: {
data: ['难度', '区分度'], // ** 这里需要与series内的每一组数据的name值保持一致
y:"bottom"
},
// 工具箱配置
toolbox: {
show : true,
feature : {
//dataView : {show: true, readOnly: false},// 数据视图,上图icon左数8,打开数据视图
restore : {show: true}, // 还原,复位原始图表,上图icon左数9,还原
saveAsImage : {show: true} // 保存为图片,上图icon左数10,保存
}
},
calculable: true,
// x轴配置
xAxis: [
{
type: 'category',
data: ['客观题7', '客观题8', '客观题9', '客观题10', '客观题11', '客观题12', '客观题13', '客观题14', '1-6', '15(1)', '15(2)', '16', '17', '18', '19', '20', '21', '22', '23'],
name: "试题" // ** x轴配置:name
}
],
// Y轴配置
yAxis: [
{
type: 'value',
boundaryGap: [0, 0.2],
// max: 1.2,
// min: 0,
// splitNumber: 6,
name: "数值" // ** y轴配置:name
}
],
// 图表Series数据序列配置
series: [
{
name: '难度', // **
type: 'line',
data: [0.82, 0.68, 0.79, 0.85, 0.73, 0.5, 0.76, 0.32, 0.5, 0.46, 0.43, 0.57, 0.71, 0.6, 0.57, 0.2, 0.27, 0.22, 0.19]
},
{
name: '区分度', // **
type: 'line',
data: [0.67, 1, 0.77, 0.56, 1, 1, 0.88, 1, 0.56, 1, 1, 1, 0.82, 1, 1, 0.75, 0.71, 0.65, 0.57]
}
]
});
}
</script>
</body>
</html>
Echarts 折线图
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 问题 一个折线图中有多条折线。由于折线之间数值范围相差较大(折线A范围[0-50],折线B范围[10000-200...
- 设置折线图平滑以及线条颜色 可以到 ECharts页面 把下面内容替换到里面看实际效果或调整各个属性(替换seri...