当前位置：网站首页>Further study of data visualization
Further study of data visualization
2022-04-23 17:03:00 【Eli-sun】
Highcharts
Highcharts It's a pure JavaScript Write a chart Library .
Highstock
Highstock It's pure use JavaScript Write the stock chart control , You can develop stock trend or timeline chart with large amount of data .
Highmaps
highmaps It's based on HTML5 Excellent map components .
echarts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.js"></script>
</head>
<style>
#chart{
width: 800px;
height: 400px;
}
</style>
<body>
<!-- Draw multiple figures in one coordinate system -->
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom, 'dark',{render:'svg'}) // dom The main body Render as svg
chart.setOption({
title:{
text:'echarts Introductory cases '
},
xAxis:{
data:[' First quarter ',' The two quarter ',' third quater ',' In the fourth quarter ']
},// x Axis
yAxis:{
},// y Axis
series:[{
type:'pie',
center:['70%',60],
radius:35,
data:[
{
name:' classification 1',
value: 50
},
{
name:' classification 2',
value: 60
},
{
name:' classification 3',
value: 55
},
{
name:' classification 4',
value: 70
}
]
},{
type:'line',
data:[100,120,96,123]
},{
type:'bar',
data:[79,81,88,72]
}] // Chart type and data
})
</script>
</body>
</html>
dataset Use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.js"></script>
</head>
<style>
#chart{
width: 800px;
height: 400px;
}
</style>
<body>
<!-- Draw multiple figures in one coordinate system -->
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom, 'dark',{render:'svg'}) // dom The main body Render as svg
chart.setOption({
dataset:{
source:[
[' First quarter ',100,79,' Category one ',50],
[' The two quarter ',112,81,' Category two ',60],
[' third quater ',96,88,' Category three ',55],
[' In the fourth quarter ',123,82, ' Category 4 ',70]
]
},
title:{
text:'echarts Introductory cases '
},
xAxis:{
data:[' First quarter ',' The two quarter ',' third quater ',' In the fourth quarter ']
},// x Axis
yAxis:{
},// y Axis
series:[{
type:'pie',
center:['70%',60],
radius:35,
encode:{itemName:3,value:4}
},{
type:'line',
encode:{x:0,value:1}
},{
type:'bar',
encode:{x:0,y:2}
}] // Chart type and data
})
</script>
</body>
</html>
echarts Components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.js"></script>
</head>
<style>
#chart{
width: 800px;
height: 400px;
}
</style>
<body>
<!-- Draw multiple figures in one coordinate system -->
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom, 'dark',{render:'svg'}) // dom The main body Render as svg
chart.setOption({
dataset:{
source:[
[' First quarter ',100,79,' Category one ',50],
[' The two quarter ',112,81,' Category two ',60],
[' third quater ',96,88,' Category three ',55],
[' In the fourth quarter ',123,82, ' Category 4 ',70]
]
},
title:{
text:'echarts Introductory cases ',
subtext:' Data visualization case ' // Subtitle
},
xAxis:{
data:[' First quarter ',' The two quarter ',' third quater ',' In the fourth quarter ']
},// x Axis
yAxis:{
},// y Axis
legend:{
// data:[' classification ',' Broken line diagram ',' Histogram ']
data:[{
name:' classification ',
icon:'circle',
textStyle:{
color:"red"
}
},' Broken line diagram ',' Histogram '],
left:300
},// legend
toolbox:{
feature:{
dataZoom:{
yAxisIndex:false
},
restore:{},
saveAsImage:{}
}
},// Area zoom 、 Region restore Refresh and download
dataZoom:[
{
show:true,
start:0,
end:100
}
],// The horizontal brace below
series:[{
name:' classification ',
type:'pie',
center:['70%',60],
radius:35,
encode:{itemName:3,value:4}
},{
name:' Broken line diagram ',
type:'line',
encode:{x:0,value:1}
},{
name:' Histogram ',
type:'bar',
encode:{x:0,y:2}
}] // Chart type and data
})
</script>
</body>
</html>
ECharts location
Can be adjusted by grid To solve the display position of the diagram , It can be a tree value or a percentage
grid:{
top:100,
left:'10%',
right:10,
bottom:100
},// location
The overall code ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.js"></script>
</head>
<style>
#chart{
width: 800px;
height: 400px;
}
</style>
<body>
<!-- Draw multiple figures in one coordinate system -->
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom, 'dark',{render:'svg'}) // dom The main body Render as svg
chart.setOption({
dataset:{
source:[
[' First quarter ',100,79,' Category one ',50],
[' The two quarter ',112,81,' Category two ',60],
[' third quater ',96,88,' Category three ',55],
[' In the fourth quarter ',123,82, ' Category 4 ',70]
]
},
title:{
text:'echarts Introductory cases ',
subtext:' Data visualization case ' // Subtitle
},
xAxis:{
data:[' First quarter ',' The two quarter ',' third quater ',' In the fourth quarter ']
},// x Axis
yAxis:{
},// y Axis
legend:{
// data:[' classification ',' Broken line diagram ',' Histogram ']
data:[{
name:' classification ',
icon:'circle',
textStyle:{
color:"red"
}
},' Broken line diagram ',' Histogram '],
left:300
},// legend
grid:{
top:100,
left:'10%',
right:10,
bottom:100
},// location
toolbox:{
feature:{
dataZoom:{
yAxisIndex:false
},
restore:{},
saveAsImage:{}
}
},// Area zoom 、 Region restore Refresh and download
dataZoom:[
{
show:true,
start:0,
end:100
}
],// The horizontal brace below
series:[{
name:' classification ',
type:'pie',
center:['70%',60],
radius:35,
encode:{itemName:3,value:4}
},{
name:' Broken line diagram ',
type:'line',
encode:{x:0,value:1}
},{
name:' Histogram ',
type:'bar',
encode:{x:0,y:2}
}] // Chart type and data
})
</script>
</body>
</html>
ECharts Coordinate system
Common but coordinate system scatter plot case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.js"></script>
</head>
<style>
#chart{
width: 800px;
height: 400px;
}
</style>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom)
chart.setOption({
xAxis:{},
yAxis:{},
dataset:{
source:[
[
13,44
],
[34,77],
[44,78],
[22,34],
[12,55]
]
},
series:[{
type:'scatter',
encode:{x:0,y:1}
}]
})
</script>
</body>
</html>
Scatter diagram double coordinate system case
ECharts Multiple coordinate systems
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.js"></script>
</head>
<style>
#chart{
width: 800px;
height: 400px;
}
</style>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom)
chart.setOption({
xAxis:[{
type:'category',
gridIndex:0
},{
type:'category',
gridIndex:1
}],
yAxis:[{
min:0,
max:100,
gridIndex:0
},
{
splitLine:{
show:false
},
gridIndex:0
},
{
min:0,
max:150,
gridIndex:1
}
],
grid:[{
bottom:'55%'
},{
top:'55%'
}],
dataset:{
source:[
['product','2012','2013','2014','2015'],
['Matcha Latte',41.1,30.4,65.1,53.3],
['Milk Tea',86.5,92.1,85.7,83.1]
]
},
series:[{
type:'bar',
seriesLayoutBy:'row',
xAxisIndex:0,
yAxisIndex:0
},
{
type:'line',
seriesLayoutBy:'row',
xAxisIndex:0,
yAxisIndex:1
},
{
type:'bar',
seriesLayoutBy:'row',
xAxisIndex:1,
yAxisIndex:2
}
]
})
</script>
</body>
</html>
Technology selection
版权声明
本文为[Eli-sun]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204230554289926.html
边栏推荐
- Shell script -- shell programming specification and variables
- 深入了解3D模型相关知识（建模、材质贴图、UV、法线），置换贴图、凹凸贴图与法线贴图的区别
- PHP efficiently reads large files and processes data
- feign报400处理
- How much do you know about the process of the interview
- Pycham connects to the remote server and realizes remote debugging
- PostgreSQL column storage and row storage
- Pytorch: the pit between train mode and eval mode
- Tencent resolves the address according to the IP address
- Nodejs installation and environment configuration
猜你喜欢
Use case labeling mechanism of robot framework
MySQL master-slave replication
Detailed explanation of Niuke - Gloves
Do you really understand the principle of code scanning login?
Nodejs installation and environment configuration
Loggie source code analysis source file module backbone analysis
SQL database
Use case execution of robot framework
1-4 configuration executable script of nodejs installation
Nifi fast installation and file synchronization
随机推荐
【PIMF】OpenHarmony啃论文俱乐部—在ACM Survey闲逛是什么体验
拷贝构造函数 浅拷贝与深拷贝
∑GL-透视投影矩阵的推导
[problem solving] [show2012] random tree
ByteVCharts可视化图表库，你想要的我都有
面试百分百问到的进程，你究竟了解多少
Bottom processing of stack memory in browser
First knowledge of go language
AIOT产业技术全景结构-数字化架构设计(8)
自定义my_strcpy与库strcpy【模拟实现字符串相关函数】
The new MySQL table has a self increasing ID of 20 bits. The reason is
Log4j output log information to file
Customize my_ Strcpy and library strcpy [analog implementation of string related functions]
Detailed explanation of Niuke - Gloves
oracle 中快速获取表的列名列表
ACL 2022 | DialogVED：用于对话回复生成的预训练隐变量编码-解码模型
Public variables of robotframework
How vscode compares the similarities and differences between two files
Project framework of robot framework
Knowledge points and examples of [seven input / output systems]