[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 ...
随机推荐
- sass和less
一.相同点 sass和less具有变量.作用域.混合.嵌套.继承.运算符.颜色函数.导入和注释等基本特性,而且以“变量”.“混合”.“嵌套”.“继承”和“颜色函数”为五大基本特性. sass和less ...
- Bootstrap 分页、标签、徽章、超大屏幕、页面标题
分页(pagination), 是一种无序列表 1.默认的分页(.pagination) 代码示例: <ul class="pagination"> <li> ...
- php 使用curl获取Location:重定向后url
在php获取http头部信息上,php有个自带的函数get_headers(),我以前也是用这个的,听说效率在win上不咋地,再加上最近研究百度url无果,写了cURL获取重定向url的php代码来折 ...
- 2016年3月8日Android实习日记
1.出现fragment后台栈的bug. bug描述:当点击加入后台栈的操作按钮改变指定控件的内容之后,称为A操作:接下来又点击其它没有操作后台栈的按钮来修改原来指定的控件内容,称为B操作.然后点击b ...
- 在linux上安装tomcat
(1)主要参考https://jingyan.baidu.com/article/3065b3b6e0fad2becff8a419.html(这个看后基本知道怎么安装tomcat) 其次参考:http ...
- unity8个入门代码
01,基本碰撞检测代码 function OnCollisionEnter(theCollision:Collision){ if(theCollision.gameObject.name==&quo ...
- Java多线程:CAS与java.util.concurrent.atomic
锁的几种概念 悲观锁 总是假设最坏的情况,每次获取数据都认为别人会修改,所以拿数据时会上锁,一直到释放锁不允许其他线程修改数据.Java中如synchronized和reentrantLock就是这种 ...
- Ubuntu GNOME 13.04将关闭窗口的按钮放在最右边
转载请注明:转自http://blog.csdn.net/u010811449/article/details/9426187 先上图: 首先打开dconf系统配置编译器. 找到 rog -> ...
- Synchronized、lock、volatile、ThreadLocal、原子性总结、Condition
http://blog.csdn.net/sinat_29621543/article/details/78065062
- 【.NET线程--进阶(一)】--线程方法详解
上篇博客从线程的基本概况开始着重讨论了线程,进程,程序之间的区别,然后讨论了线程操作的几个类,并通过实例来说明了线程的创建方法.本篇博客将会带大家更深入的了解线程,介绍线程的基本方法,并通过一个Dem ...