[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 ...
随机推荐
- Linux配置Redis外网访问
下载:redis-3.2.5.tar.gz 拷贝到指定目录解压:tar -xzvf redis-3.2.5.tar.gz 进入到解压目录redis-3.2.5下安装: makemake install ...
- AGC 018E.Sightseeing Plan(组合 DP)
题目链接 \(Description\) 给定三个不相交的矩形\(A(X1,Y1)-(X2,Y2),B(X3,Y3)-(X4,Y4),C(X5,Y5)-(X6,Y6)\),求 从第一个矩形中某点\(a ...
- node模块包装为Promise书写法
1. const Promise = require('bluebird') const fs = Promise.promisifyAll(Promise.promisify(require('fs ...
- 实例化和设置一个优秀的php对象
类是用于生成对象的代码模板,对象可以被说成是类的"实例" class ShopProduct{ public $title = 'default product'; // 属性也称 ...
- kaggle PredictingRedHatBusinessValue 简单的xgboost的交叉验证
PredictingRedHatBusinessValue 这个超级简单的比赛 随手在一个kernels上面随便改了改,交叉验证的xgboost: 感觉还是稍微有一点借鉴意义的(x 注释的部分是One ...
- python: 序列化/反序列化及对象的深拷贝/浅拷贝
一.序列化/反序列化 python中内置了很多序列化/反序列化的方式,最常用的有json.pickle.marshal这三种,示例用法如下: import json import pickle imp ...
- Using a Virtex Device to Drive 5V CMOS-Level Signals
Must tri-state outputs and use an external resistor to pull up to 5V To drive 5V CMOS-level inputs, ...
- Servlet第五课:Cookie的使用
目标规划: 通过这一节课,我们能够懂得怎样使用Cookie.以及怎样获取Cookie中的内容. 插播广告:博客之星评选.点击投我一票.谢谢. Cookie的具体概述. 1. Cookie 是保存在cl ...
- excel两张表数据匹配数据(VLOOKUP)
最近项目中需要跨项目导入数据,现整理Excel的一个小技能,记录如下. 第一步:我们打开一个excel表,创建数据如下. 第二步:我们把光标定位在需要展示数据的单元格中,如下图所示. 第三步:我们可以 ...
- 发布库到仓库 maven jcenter JitPack MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...