当前位置：网站首页>数据可视化进一步学习
数据可视化进一步学习
2022-04-23 05:56:00 【Eli-sun】
Highcharts
Highcharts是一个用纯JavaScript编写的一个图表库。
Highstock
Highstock是纯用JavaScript编写的股票图表控件，可以开发股票走势或大数据量的时间轴图表。
Highmaps
highmaps是一款基于HTML5的优秀地图组件。
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>
<!-- 一个坐标系绘制多个图 -->
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom, 'dark',{render:'svg'}) // dom 主体 渲染为svg
chart.setOption({
title:{
text:'echarts入门案例'
},
xAxis:{
data:['一季度','二季度','三季度','四季度']
},// x轴
yAxis:{
},// y轴
series:[{
type:'pie',
center:['70%',60],
radius:35,
data:[
{
name:'分类1',
value: 50
},
{
name:'分类2',
value: 60
},
{
name:'分类3',
value: 55
},
{
name:'分类4',
value: 70
}
]
},{
type:'line',
data:[100,120,96,123]
},{
type:'bar',
data:[79,81,88,72]
}] // 图表类型和数据
})
</script>
</body>
</html>
dataset的使用
<!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, 'dark',{render:'svg'}) // dom 主体 渲染为svg
chart.setOption({
dataset:{
source:[
['一季度',100,79,'分类一',50],
['二季度',112,81,'分类二',60],
['三季度',96,88,'分类三',55],
['四季度',123,82, '分类四',70]
]
},
title:{
text:'echarts入门案例'
},
xAxis:{
data:['一季度','二季度','三季度','四季度']
},// x轴
yAxis:{
},// y轴
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}
}] // 图表类型和数据
})
</script>
</body>
</html>
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>
<!-- 一个坐标系绘制多个图 -->
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom, 'dark',{render:'svg'}) // dom 主体 渲染为svg
chart.setOption({
dataset:{
source:[
['一季度',100,79,'分类一',50],
['二季度',112,81,'分类二',60],
['三季度',96,88,'分类三',55],
['四季度',123,82, '分类四',70]
]
},
title:{
text:'echarts入门案例',
subtext:'数据可视化案例' // 副标题
},
xAxis:{
data:['一季度','二季度','三季度','四季度']
},// x轴
yAxis:{
},// y轴
legend:{
// data:['分类','折线图','柱状图']
data:[{
name:'分类',
icon:'circle',
textStyle:{
color:"red"
}
},'折线图','柱状图'],
left:300
},// 图例
toolbox:{
feature:{
dataZoom:{
yAxisIndex:false
},
restore:{},
saveAsImage:{}
}
},// 区域缩放 、区域还原 刷新和下载
dataZoom:[
{
show:true,
start:0,
end:100
}
],// 下面那个横拉条
series:[{
name:'分类',
type:'pie',
center:['70%',60],
radius:35,
encode:{itemName:3,value:4}
},{
name:'折线图',
type:'line',
encode:{x:0,value:1}
},{
name:'柱状图',
type:'bar',
encode:{x:0,y:2}
}] // 图表类型和数据
})
</script>
</body>
</html>
ECharts定位
可以通过调整grid来解决图的显示位置，可以树数值也可以是百分比
grid:{
top:100,
left:'10%',
right:10,
bottom:100
},// 定位
整体代码：
<!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, 'dark',{render:'svg'}) // dom 主体 渲染为svg
chart.setOption({
dataset:{
source:[
['一季度',100,79,'分类一',50],
['二季度',112,81,'分类二',60],
['三季度',96,88,'分类三',55],
['四季度',123,82, '分类四',70]
]
},
title:{
text:'echarts入门案例',
subtext:'数据可视化案例' // 副标题
},
xAxis:{
data:['一季度','二季度','三季度','四季度']
},// x轴
yAxis:{
},// y轴
legend:{
// data:['分类','折线图','柱状图']
data:[{
name:'分类',
icon:'circle',
textStyle:{
color:"red"
}
},'折线图','柱状图'],
left:300
},// 图例
grid:{
top:100,
left:'10%',
right:10,
bottom:100
},// 定位
toolbox:{
feature:{
dataZoom:{
yAxisIndex:false
},
restore:{},
saveAsImage:{}
}
},// 区域缩放 、区域还原 刷新和下载
dataZoom:[
{
show:true,
start:0,
end:100
}
],// 下面那个横拉条
series:[{
name:'分类',
type:'pie',
center:['70%',60],
radius:35,
encode:{itemName:3,value:4}
},{
name:'折线图',
type:'line',
encode:{x:0,value:1}
},{
name:'柱状图',
type:'bar',
encode:{x:0,y:2}
}] // 图表类型和数据
})
</script>
</body>
</html>
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>
<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>
散点图双坐标系案例
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>
<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>
技术选型
版权声明
本文为[Eli-sun]所创，转载请带上原文链接，感谢
https://blog.csdn.net/vfjcgg/article/details/121725557
边栏推荐
- 解析psd文件，并映射成组件
- .Net Core 下使用 Quartz —— 【2】作业和触发器之初步了解作业
- js面试题：fn.call.call.call.call(fn2) 解析
- The difference between single quotation mark, double quotation mark and back quotation mark in shell script
- Oracle改成mysql
- excel快速自动填充空白单元格上一行的内容
- Your brain expands and shrinks over time — these charts show how
- 【ORACLE与mysql的区别】
- Unity3D对象池的理解与小例子
- New features of ES6
猜你喜欢
随机推荐
C＃ webpai 路由详解
Redux概述
China creates vast research infrastructure to support ambitious climate goals
ASP.NET CORE 配置选项(上篇)
出入库与库存系统的模型问题
解析psd文件，并映射成组件
oninput 一个函数达到控制多个oninput的效果(将本输入框的内容作为参数)【很实用，很实用】
Unity3D对象池的理解与小例子
【Markdown笔记】
查漏补缺（四）
.Net Core 下使用 Quartz —— 【4】作业和触发器之作业属性和异常
Oracle改成mysql
低代码开发平台整理
ES6新增方法
欢迎使用Markdown编辑器
Modify registry values
Navicat 连接 oracle library is not loaded的解决方法
Your brain expands and shrinks over time — these charts show how
微信小程序之改变数组中某值，对象中某值的方法
C language code specification