当前位置：网站首页>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
边栏推荐
- How vscode compares the similarities and differences between two files
- Lock锁
- 深入了解3D模型相关知识（建模、材质贴图、UV、法线），置换贴图、凹凸贴图与法线贴图的区别
- How to implement distributed locks with redis?
- Variable length parameter__ VA_ ARGS__ Macro definitions for and logging
- 1-2 JSX syntax rules
- Customize my_ Strcpy and library strcpy [analog implementation of string related functions]
- Scope and scope chain in JS
- Do you really understand the principle of code scanning login?
- Pseudo Distributed installation spark
猜你喜欢
oracle 中快速获取表的列名列表
Change the password after installing MySQL in Linux
![Customize my_ Strcpy and library strcpy [analog implementation of string related functions]](/img/71/a6a0c7b0e652d2b807f259f7cbf139.png)
Customize my_ Strcpy and library strcpy [analog implementation of string related functions]
PyMySQL
扫码登录的原理你真的了解吗？
【PIMF】OpenHarmony啃论文俱乐部—在ACM Survey闲逛是什么体验
Kunteng full duplex digital wireless transceiver chip kt1605 / kt1606 / kt1607 / kt1608 is suitable for interphone scheme
Smart doc + Torna generate interface document
Quick install mongodb
Detailed explanation of information abstract, digital signature, digital certificate, symmetric encryption and asymmetric encryption
随机推荐
1-3 nodejs installation list configuration and project environment
Handwritten event publish subscribe framework
文件操作《二》（5000字总结篇）
Pycham connects to the remote server and realizes remote debugging
[pimf] openharmony paper Club - what is the experience of wandering in ACM survey
Sub database and sub table & shardingsphere
博士申请 | 厦门大学信息学院郭诗辉老师团队招收全奖博士/博后/实习生
聊一聊浏览器缓存控制
Document operation II (5000 word summary)
_ Mold_ Board_
Blue Bridge Cup provincial road 06 -- the second game of the 12th provincial competition
Derivation of Σ GL perspective projection matrix
Do you really understand the principle of code scanning login?
Encapsulating the logging module
JSON deserialize anonymous array / object
TypeError: set_figure_params() got an unexpected keyword argument ‘figsize‘
PostgreSQL列存与行存
Pytorch: the pit between train mode and eval mode
AIOT产业技术全景结构-数字化架构设计(8)
Paging SQL