需求:课程平均分(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] 横纵数据散点图的更多相关文章

  1. excel多组数据散点图生成

    在研究数据分布时,散点图是一类比较常用的方法,通过三点图可以很好的显示数据的分布位置.一组数据生成散点图,利用excel是很容易生成的:但是,多组数据生成散点图,不同组数据用不同颜色表示,那该怎么生成 ...

  2. Echarts自动刷新数据

    1.Echarts自动刷新数据 1.Echarts柱状图的正常配置 注:声明了 myChart.test这两个都有用 官方示例中myChart是声明在 function(ec)里面的 <scri ...

  3. Django+Xadmin+Echarts动态获取数据legend颜色显示灰色问题已解决

    前段时间做的使用Django的Xadmin后台和百度Echarts进行后台数据可视化,功能虽然实现,展示出来的legend图例,都是灰色的,只有鼠标放上去才会显示彩色的.百度都快被我刨穿了,看到有类似 ...

  4. 高速基于echarts的大数据可视化

    [Author]: kwu 高速基于echarts的大数据可视化,echarts纯粹的js实现的图表工具.高速开发的过程例如以下: 1.引入echarts的依赖js库 <script type= ...

  5. echarts地图边界数据的实时获取与应用,省市区县多级联动【附最新geoJson文件下载】

    首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...

  6. echarts参数详解--散点图

    参考地址:http://www.cnblogs.com/weizhen/p/5907617.html <!-- 1.首先需要下载包echarts.js,然后引入该包 --> <!DO ...

  7. 基于echarts 24种数据可视化展示,填充数据就可用,动手能力强的还可以DIY(演示地址+下载地址)

    前言 我们先跟随百度百科了解一下什么是"数据可视化 [1]". 数据可视化,是关于数据视觉表现形式的科学技术研究. 其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽提出来 ...

  8. echarts折线图--数据交互

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. Echarts基于动态数据初步使用 及问题 代码记录.

    ECHARTS 插件 基本的动态数据展示(横向图) 下载 echarts.commn.min.js文件 在页面中进行引用, 并为Echarts图形准备一个div盒子 <!-- 引入插件 --&g ...

随机推荐

  1. MySQL数据库-----基本命令操作

    小编之前一直想要了解一下,如何搭建数据库,这里分享一下在此之前的一些准备工作,首先小编是先了解数据库(mysql),以下是小编的一些认识: 一.mysql常用命令1.mysql登录和退出 登录:mys ...

  2. 潭州课堂25班:Ph201805201 WEB 之 页面编写 第四课 登录注册 (课堂笔记)

    index.html 首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  3. swoole深入学习 4. process

    swoole-1.7.2增加了一个进程管理模块,用来替代PHP的pcntl扩展.pcntl是php新增的一个多进程扩展,用来实现多进程,但是有很多不完善的地方,swoole 就完善了这些地方,而且使得 ...

  4. rabbitmq使用(四)

    In the previous tutorial we built a simple logging system. We were able to broadcast log messages to ...

  5. Cocos Creator 安装和启动,Dashboard 的介绍

    1,去官网:http://www.cocos.com/download,或者直接百度cocos2d官网,进入下载对应版本:[参考来源:官方文档] 2,下载完成后直接解压即可.以window举例, 运行 ...

  6. svnkit https 忽略证书认证

    直接上代码 解决jdk版本问题:Security.setProperty("jdk.tls.disabledAlgorithms", ""); import j ...

  7. idea html,js修改不用重启进程

    1Setting -> build-compiler ---勾选  Build project automatically选项 2 快捷键Ctrl + Shift + A查找registry命令 ...

  8. 1.5.3 GROUP BY子句

    1.5.3 GROUP BY子句正在更新内容.请稍后

  9. JProfiler进行Java运行时内存分析

    原文地址:https://www.cnblogs.com/onmyway20xx/p/3963735.html 在最近的工作中,通过JProfiler解决了一个内存泄漏的问题,现将检测的步骤和一些分析 ...

  10. Hardware Monitor for Mac(硬件运行状态监测工具)破解版安装

    1.软件简介    Hardware Monitor 是 macOS 系统上一款 mac 硬件检测软件,同时还可以示硬盘.显卡温度以及电池电压等等监控信息.Hardware Monitor for M ...