[echarts] 横纵数据散点图
需求:课程平均分(X)与课程通过率散点图

http://echarts.baidu.com/echarts2/doc/example/scatter1.html
https://www.cnblogs.com/dengyg200891/p/6863128.html https://blog.csdn.net/luanpeng825485697/article/details/76864440 // 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); //第二步构造数据
var data1 = [];//数据区域缩放组件
//构造随机数
var random = function (max){
return (Math.random() * max).toFixed(3);
}; //将数据装载到数组中
for (var i = 0; i < 500; i++) {
data1.push([random(15), random(10), random(1)]);
}; //3、配置option项
//第三步就是使用echarts的option进行参数的配置
option = {} ==============================================================
option = {
title : {
text: '课程平均分和通过率散点分布图',
subtext: 'X轴:课程平均分 / Y轴:课程通过率'
},
tooltip : {
trigger: 'axis',
showDelay : 0,
formatter : function (params) {
if (params.value.length > 1) {
return params.value[2] +' <br/>'
+ params.seriesName + ' :'
+ params.value[0] + '分, '
+ params.value[1] + '% ';
}
else {
return params.seriesName + ' :<br/>'
+ params.name + ' : '
+ params.value + '%';
}
},
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
}
},
legend: {
data:['[课程平均分,课程通过率]']
},
toolbox: {
show : true,
feature : {
mark : {show: false},
dataZoom : {show: false},
dataView : {show: false, readOnly: false},
restore : {show: false},
saveAsImage : {show: false}
}
},
xAxis : [
{
type : 'value',
//name:'课程平均分',
scale:true,
axisLabel : {
formatter: '{value} 分'
}
}
],
yAxis : [
{
type : 'value',
//name:'课程通过率',
scale:true,
axisLabel : {
formatter: '{value} %'
}
}
],
series : [ {
name:'[课程平均分,课程通过率]',
type:'scatter',
symbolSize: function (value){
return Math.round(value[1] / 12);
},
data: [
[70.5, 67.7,'大学物理1'],
[79.1,82.7,'大学物理2'],
[77.8, 100,'大学物理3']
]
}
]
}; =======================================
//第二步构造数据
var data1 = [];//数据区域缩放组件
//构造随机数
var random = function (max){
return (Math.random() * max).toFixed(2);
};
i
//将数据装载到数组中
for (var i = 0; i < 751; i++) {
data1.push([random(15), random(10), "大学物理"+i ]);
}; console.log("data1:")
console.log(data1) option = {
title : {
text: '课程平均分和通过率散点分布图',
subtext: 'X轴:课程平均分 / Y轴:课程通过率'
},
tooltip : {
trigger: 'axis',
showDelay : 0,
formatter : function (params) {
if (params.value.length > 1) {
return params.value[2] +' <br/>'
+ params.seriesName + ' :'
+ params.value[0] + '分, '
+ params.value[1] + '% ';
}
else {
return params.seriesName + ' :<br/>'
+ params.name + ' : '
+ params.value + '%';
}
},
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
}
},
legend: {
data:['[课程平均分,课程通过率]']
},
toolbox: {
show : true,
feature : {
mark : {show: false},
dataZoom : {show: false},
dataView : {show: false, readOnly: false},
restore : {show: false},
saveAsImage : {show: false}
}
},
xAxis : [
{
type : 'value',
//name:'课程平均分',
scale:true,
axisLabel : {
formatter: '{value} 分'
}
}
],
yAxis : [
{
type : 'value',
//name:'课程通过率',
scale:true,
axisLabel : {
formatter: '{value} %'
}
}
],
series : [ {
name:'[课程平均分,课程通过率]',
type:'scatter',
data:data1
}
]
};
[echarts] 横纵数据散点图的更多相关文章
- excel多组数据散点图生成
在研究数据分布时,散点图是一类比较常用的方法,通过三点图可以很好的显示数据的分布位置.一组数据生成散点图,利用excel是很容易生成的:但是,多组数据生成散点图,不同组数据用不同颜色表示,那该怎么生成 ...
- Echarts自动刷新数据
1.Echarts自动刷新数据 1.Echarts柱状图的正常配置 注:声明了 myChart.test这两个都有用 官方示例中myChart是声明在 function(ec)里面的 <scri ...
- Django+Xadmin+Echarts动态获取数据legend颜色显示灰色问题已解决
前段时间做的使用Django的Xadmin后台和百度Echarts进行后台数据可视化,功能虽然实现,展示出来的legend图例,都是灰色的,只有鼠标放上去才会显示彩色的.百度都快被我刨穿了,看到有类似 ...
- 高速基于echarts的大数据可视化
[Author]: kwu 高速基于echarts的大数据可视化,echarts纯粹的js实现的图表工具.高速开发的过程例如以下: 1.引入echarts的依赖js库 <script type= ...
- echarts地图边界数据的实时获取与应用,省市区县多级联动【附最新geoJson文件下载】
首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...
- echarts参数详解--散点图
参考地址:http://www.cnblogs.com/weizhen/p/5907617.html <!-- 1.首先需要下载包echarts.js,然后引入该包 --> <!DO ...
- 基于echarts 24种数据可视化展示,填充数据就可用,动手能力强的还可以DIY(演示地址+下载地址)
前言 我们先跟随百度百科了解一下什么是"数据可视化 [1]". 数据可视化,是关于数据视觉表现形式的科学技术研究. 其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽提出来 ...
- echarts折线图--数据交互
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Echarts基于动态数据初步使用 及问题 代码记录.
ECHARTS 插件 基本的动态数据展示(横向图) 下载 echarts.commn.min.js文件 在页面中进行引用, 并为Echarts图形准备一个div盒子 <!-- 引入插件 --&g ...
随机推荐
- hdu4035 Maze
题目链接 hdu4035 Maze 题解 f[u]表示在节点u通关的所需的边数期望 转移方程分叶子节点和非叶子点讨论 发现都可以化成f[x]=af[1]+bf[dad]+c的形式 然后推一下系数 还是 ...
- Tinkoff Challenge - Final Round (Codeforces Round #414, rated, Div. 1 + Div. 2) 【ABC】
老年人题解,语言python3 A - Bank Robbery 题意:给你ABC,以及n个数,问你在(B,C)之间的数有多少个. 题解:对于每个数判断一下就好了嘛 x,y,z = map(int,i ...
- Linux学习笔记12—磁盘管理
一.查看磁盘或目录的容量 1. df命令 作用:查看已挂载磁盘的总容量.使用容量.剩余容量等,可以不加任何参数,默认是按k为单位显示的 参数: -I : 查看inodes使用状况 -h: 使用合适的 ...
- C语言事实上不简单:sizeof
问:C语言中一共同拥有多少个keyword? 答:32个. 答不上来的没关系.非常正常.我们玩的是程序的艺术.而不是背数字. 只是这个特殊的数字1<<5也是非常好记的-.-. 问:size ...
- Chrome RenderText分析(1)
先从一些基础的类开始 1.Range // A Range contains two integer values that represent a numeric range, like the ...
- Linux的cron与%
这个cron不能执行: * * * * * /bin/echo `/bin/date +"%Y-%m-%d-%T"` >> /home/adminuser/test.t ...
- 【面试 SQL】【第十六篇】SQL相关面试
=================================================================================== 1.一张表,姓名,科目,成绩,一 ...
- haproxy负载均衡的安装配置
haproxy是一款可靠,高性能的并且可以支持TCP/HTTP的负载均衡器,和前面说过的nginx负载均衡类似,这里haproxy对于负载均衡来说更专业,支持的配置选项更多,稳定性也很强,甚至只需要一 ...
- Apache log4net™ 手册——介绍【翻译】
原文地址 本文内容 配置 配置属性 应用程序 appSettings 配置文件 配置语法 追加器(Appenders) 筛选器(Filters) 布局(Layouts) 根记录器(Root Logge ...
- 后台任务hangfire
Installation¶ There are a couple of packages for Hangfire available on NuGet. To install Hangfire in ...