作用:可视化数据,即借助图形,清晰的传达信息的表现方式,把枯燥的数据转化为图形
1.echarts基本介绍
是一个开源的可视化图表库,就是js插件
特点:
-
性能好,运行于pc端与移动端
-
兼容主流浏览器
-
提供了非常多的图表,支持定制
使用
1.下载echarts,引入
2.准备一个具有宽高的dom容器 div
3.初始化echarts实例 init
4.准备配置项 option
5.基于配置项显示图表 setoption
容器多大图表就有多大
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.querySelector('div'));
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
去echarts里看文档查看配置项
2.常用的配置项
1.标题组件 title
属性
show:true或者false
text:“标题文字”
textstyle:{
color:“red”,
fontsize:“20px”
},
left:“20px”,
top:“10px”, 这个距离上和左是指距离盒子的距离
2.提示框 tooltip
鼠标放上去会出来提示框,提示当前数据
触发类型 trigger :item散点图 axis坐标轴触发, 直线图柱状图 none不触发
是否显示提示框的浮层showcontent
enterable鼠标是否可以进入提示框浮层
-
可以在echarts的示例里面直接写代码,就能实时更新代码的结果,再看看其他的配置项
3.图例 legend
属性:data图例的数据数组,里面放的是几个name
series组件里也有data属性,里面存的是数字,有name属性,就是这条data是谁的数据,那么就是谁
legend的data的值要和series.name对应
4.绘制网格grid
就是整体的坐标轴,有left,right,bottom,也是距离盒子的距离,左0下0坐标轴就不见了。
但是也可以设置containlabel为true,是否包含坐标轴的刻度标签,默认是false,就会被隐藏,true的话就设置为0也能看见
5.xaxis 坐标轴
只有top和bottom
data就是坐标轴的内容 1月。。。。
sxisline 点画线什么的
splitline 就有分割线了,背景是网格的,就是会显示竖的线,在每一个点上,可以设置颜色
6.series数据项
type就是各种类型的图 柱状图 饼图
smooth 是否平滑曲线显示,false就变成了折线直线
7.toolbox 工具盒
属性feature里有一个属性saveasimage {}就会以图片保存
柱状图案例
<script>
//初始化
var myChart=echarts.init(document.querySelector('div'))
//配置
var option = {
title:{
text:"2021全学科薪资走势",
textStyle:{
fontSize:24
},
left:10,
top:10
},
grid:{
left:"30px",
top:"60px"
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月','4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine:{
show:true,
lineStyle:{
type:"dashed",
color:"#ccc"
},
axisLabel:{
show:true,
color:"#333"
},
},
},
color:[
{
type:"linear",
x:0,
y:0,
x2:1,
y2:1,
colorStops:[{
offset:0,color:'blue'
},{
offset:1,color:'red'
}],
global:false
}
],
yAxis: {
type: 'value',
splitNumber:5,
splitLine:{
lineStyle:{
color:"#ccc",
type:"dashed"
}
}
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330],
type: 'line',
smooth: true,
symbol:"emptyCircle",
symbolSize:10,
lineStyle:{
width:5
},
areaStyle:{
color:{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color:'rgba(155,244,255,0.8)' // 0% 处的颜色
},
{
offset: 0.8, color:'rgba(155,244,255,0.1)'// 100% 处的颜色
},
{
offset: 1, color:'rgba(155,244,255,0)'// 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
]
};
//显示
myChart.setOption(option)
饼图案例
//初始化
var myChart=echarts.init(document.querySelector('div'))
//配置
var option = {
title:{
text:"班级薪资分布",
top:10,
left:10,
textStyle:{
fontSize:20
}
},
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
color:['red','yellow','blue','green','pink'],
series: [
{
name: '班级薪资分布',
type: 'pie',
radius: ['50%', '60%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 4
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 200, name: '1万以上' },
{ value: 735, name: '1-1.5万' },
{ value: 580, name: '1.5-2万' },
{ value: 484, name: '2万以上' }
]
}
]
};
//显示
myChart.setOption(option)