[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 ...
随机推荐
- BZOJ.1190.[HNOI2007]梦幻岛宝珠(分层背包DP)
题目链接 把重量表示为\(a\times2^b\)的形式,然后按\(b\)排序. 从高到低枚举每一位,\(f[i]\)表示当前位容量为\(i\)时的最大价值(容量即\(a\times2^{bit}\) ...
- Codeforces.264E.Roadside Trees(线段树 DP LIS)
题目链接 \(Description\) \(Solution\) 还是看代码好理解吧. 为了方便,我们将x坐标左右反转,再将所有高度取反,这样依然是维护从左到右的LIS,但是每次是在右边删除元素. ...
- 洛谷P2879 [USACO07JAN]区间统计Tallest Cow
To 洛谷.2879 区间统计 题目描述 FJ's N (1 ≤ N ≤ 10,000) cows conveniently indexed 1..N are standing in a line. ...
- phpstorm在项目中查找某个字符串
如果项目过大,想在整个项目中找某个字符串,又不知道该字符串所在文件的路径,这时候就可以使用全局搜索了,ctrl+shift+F.在mac下,快捷键是command+shift+F:
- 【转载】实用VC++6.0插件
[转自]http://www.cnblogs.com/witxjp/archive/2011/04/03/2004556.html Visual Assist(强烈推荐)网址:http://www.w ...
- 基于Python的SQLAlchemy的操作
安装 在Python使用SQLAlchemy的首要前提是安装相应的模块,当然作为python的优势,可以到python安装目录下的scripts下,同时按住shift+加上鼠标左键,从而在菜单中打开命 ...
- nodejs sass安装报错一招解决
背景: 这个问题不是一天两天了,有时候是网速不行,有时候是被墙了,有时候是github把node-sass的包转移目录导致下载失败. Cannot download "https://git ...
- loopback文件系统
回环设备(loop-back devices) 实验环境 centos7.2 回环设备( 'loopback device')允许用户以一个普通磁盘文件虚拟一个块设备.(磁盘文件 --> 块设备 ...
- NPM慢怎么办 - nrm切换资源镜像
1. 直接配置为taobao镜像 npm config set registry https://registry.npm.taobao.org 1. 使用NRM管理镜像 npm isntall -g ...
- dyld`__abort_with_payload:
dyld`__abort_with_payload: 0x1030422f0 <+0>: mov x16, #0x209 0x1030422f4 <+4>: svc ...