echarts数据可视化详解，一篇带你入门数据可视化
Posted 吃螃蟹的小孩
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts数据可视化详解，一篇带你入门数据可视化相关的知识，希望对你有一定的参考价值。
echarts数据可视化详解，一篇带你入门数据可视化
echarts基本使用
相关配置讲解
- xAxis: 直角坐标系中的x轴
- yAxis: 直角坐标系中的y轴
- series：系列列表。每个系列通过type决定自己的图表类型
案例配置项
var option={
xAxis:{
type:'category',//类目轴
data:['小明','小红','小王']
},
yAxis:{
type:'value'//数值轴
},
series:[{
name:'语文',
//bar: 柱状图
//line:折线图
//pie: 饼图
type:'bar',
data:[70,92,87]
}],
}
echarts常用图表
- 柱状图
- 折线图
- 散点图
- 饼图
- 地图
- 雷达图
- 仪表盘图
柱状图
实现步骤
-
echarts最基本的代码结构：
引入js文件，DOM容器，初始化对象，设置option
-
x轴数据：[‘张三’,‘李四’,‘王五’,‘闰土’,‘小明’,‘茅台’,‘二妞’,‘大强’]
-
y轴数据: [88,92,63,77,94,80,72,86]
-
图表类型: 在series下设置type:bar
var myChart = echarts.init(document.getElementById('main'));
var xDataArr=['张三','李四','王五','闰土','小明','茅台','二妞','大强']
var yDataArr=[88,92,63,77,94,80,72,86]
var option={
xAxis:{
type:'category',
data:xDataArr
},
yAxis:{
type:'value'
},
series:[{
name:'语文',
type:'bar',
data:yDataArr
}],
}
myChart.setOption(option)
常见效果
-
最大值、最小值、平均值（markPoint、markLine）
var option={ xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value' }, series:[{ name:'语文', type:'bar', markPoint:{ data:[ { type:'max', name:'最大值' },{ type:'min', name:'最小值' } ] }, markLine:{ data:[ { type: 'average', name:'平均线' } ] }, data:yDataArr }], }
-
显示：数值显示 柱宽度 横向柱状图（label、barWidth、对xAxis和yAxis变换）
label数值显示
var option={ xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value' }, series:[{ name:'语文', type:'bar', label:{ show:true }, data:yDataArr }], }
barWidth柱宽度
var option={
xAxis:{
type:'category',
data:xDataArr
},
yAxis:{
type:'value'
},
series:[{
name:'语文',
type:'bar',
barWidth:'30%',
data:yDataArr
}],
}
横向柱状图
var option={
xAxis:{
type:'value',
},
yAxis:{
type:'category',
data:xDataArr
},
series:[{
name:'语文',
type:'bar',
data:yDataArr
}],
}
通用配置
所有图表都能使用的配置
- 标题：title
- 提示：tooltip
- 工具按钮：toolbox
- 图例：legend
title 标题
文字样式
testStyle
var option={
title:{
text:"语文成绩",
textStyle:{
color:"red"
}
},
xAxis:{
type:'category',
data:xDataArr
},
yAxis:{
type:'value',
},
series:[{
name:'语文',
type:'bar',
data:yDataArr
}],
}
标题边框
borderWidth、borderColor、borderRaduis
var option={
title:{
text:"语文成绩",
textStyle:{
color:"red"
},
borderWidth:5,
borderColor:"green",
borderRadius:5
},
xAxis:{
type:'category',
data:xDataArr
},
yAxis:{
type:'value',
},
series:[{
name:'语文',
type:'bar',
data:yDataArr
}],
}
标题位置
left、top、right、bottom
var option={ title:{ text:"语文成绩", textStyle:{ color:"red" }, left:"50%", top:10 }, xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'语文', type:'bar', data:yDataArr }], }
tooltip 提示框
鼠标滑过或者点击时的提示
触发类型
trigger(item、axis)
var option={ tooltip:{ trigger:"item" }, xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'语文', type:'bar', data:yDataArr }], }
触发时机
t riggerOn(mouseover、click)
var option={ tooltip:{ trigger:"item", triggerOn:"click" }, xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'语文', type:'bar', data:yDataArr }], }
格式化
formatter
var option={ tooltip:{ trigger:"item", triggerOn:"click", formatter:"{b} : {c}" //formatter:function(arg){ //console.log(arg);//是一个对象 //return arg.name+'的分数'+arg.data } }, xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'语文', type:'bar', data:yDataArr }], }
toolbox 工具栏
Echarts提供的工具栏
内置有五个工具:
- 导出图片
- 数据视图
- 动态类型切换
- 数据区域缩放
- 重置
显示工具栏按钮
feature
只需要在
feature对象下面添加属性即可
导出图片
saveAsImage
var option={ toolbox:{ feature:{ saveAsImage:{},//导出图片 } }, xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'语文', type:'bar', data:yDataArr }], }
数据视图
dataView
var option={ toolbox:{ feature:{ saveAsImage:{},//导出图片 dataView:{}//数据视图 } }, xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'语文', type:'bar', data:yDataArr }], }
重置
restore
var option={ toolbox:{ feature:{ saveAsImage:{},//导出图片 dataView:{},//数据视图 restore:{}//重置 } }, xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'语文', type:'bar', data:yDataArr }], }
区域缩放
dataZoom
var option={ toolbox:{ feature:{ saveAsImage:{},//导出图片 dataView:{},//数据视图 restore:{},//重置 dataZoom:{}//区域缩放 } }, xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'语文', type:'bar', data:yDataArr }], }
动态类型切换
magicType
var option={ toolbox:{ feature:{ saveAsImage:{},//导出图片 dataView:{},//数据视图 restore:{},//重置 dataZoom:{},//区域缩放 magicType:{ type:['bar','line'] } } }, xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'语文', type:'bar', data:yDataArr }], }
legend 筛选系列
图例，用于筛选系列，需要和
series配合使用
多数据使用情况
series:[{ name:'语文', type:'bar', data:yDataArr1 }, { name:'数学', type:'bar', data:yDataArr2 } ]
legend的data的值需要和series数组中某组数据的name值一致
对系列筛选
折线图
实现步骤
- 引入js文件
- DOM容器
- 初始化对象
- 设置option
- x轴数据：数组1:[‘1’,‘2’,‘3’,‘4’,‘5’,‘6’,‘7’,‘8’,‘9’,‘10’,‘11’,‘12’]
- y轴数据:数组2:[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]
- 图表类型:在series下设置type:line
var option={ xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'康师傅的销量', type:'line', data:yDataArr1 } ], }
常见效果
-
标记：最大值、最小值、平均值、标注区间(markPoint、markLine、markArea)
最大值、最小值(markPoint)
var option={ xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'康师傅的销量', type:'line', data:yDataArr1, markPoint:{ data:[{ type:"max" },{ type:"min" }] } } ], }
平均值(average)
var option={ xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'康师傅的销量', type:'line', data:yDataArr1, markLine:{ data:[{ type:"average" }] } } ], }
标注区间(markArea)
var option={ xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'康师傅的销量', type:'line', data:yDataArr1, markArea:{ data:[ [{ xAxis:'1' },{ xAxis:'2' }], [{ xAxis:'7' },{ xAxis:'8' }] ] } } ], }
-
线条控制：平滑 风格（smooth、lineStyle）
平滑线条（smooth）
var option={ xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'康师傅的销量', type:'line', data:yDataArr1, smooth:true } ], }
风格(lineStyle)
var option={ xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'康师傅的销量', type:'line', data:yDataArr1, lineStyle:{ type:"dashed", color:"green" } } ], }
-
填充风格(areaStyle)
var option={ xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[{ name:'康师傅的销量', type:'line', data:yDataArr1, areaStyle:{} } ], }
-
紧挨边缘(boundaryGap)
找x、y轴
var option={ xAxis:{ type:'category', data:xDataArr, boundaryGap: false }, yAxis:{ type:'value', }, series:[{ name:'康师傅的销量', type:'line', data:yDataArr1, } ], }
-
脱离0值/支持缩放(scale)
var option={ xAxis:{ type:'category', data:xDataArr, }, yAxis:{ type:'value', scale:true }, series:[{ name:'康师傅的销量', type:'line', data:yDataArr1, } ], }
- 堆叠图(stack)
var option={ xAxis:{ type:'category', data:xDataArr, }, yAxis:{ type以上是关于echarts数据可视化详解，一篇带你入门数据可视化的主要内容，如果未能解决你的问题，请参考以下文章
入门React 17 + Vite + ECharts 实现疫情数据可视化「02 快速搭建项目」
入门React 17 + Vite + ECharts 实现疫情数据可视化「02 快速搭建项目」