[Echarts] 史上最全常用属性讲解(附差异图)(不断更新),及图表的点击事件,重复点击的bug,自适应屏幕宽度事件处理。
作为一名程序员,更或者是前端工作人员,都离不开图形数据。不论是现在的管理系统b端,pc端,还是移动端的数据展示,都离不开图表,离不开echarts。近期我在开发前端b端时就用到了echarts,为了匹配设计图ui,尝试了各种参数,也是被整的很头疼,为了方便日后的使用,特此记录,大家如果用得到可以点赞收藏,日后也是会现在持续更新,添加修改此篇文章!
注:可以通过小标题查找你的答案
1:左上角文字标题字体大小,颜色:
textStyle
title: {
textStyle: {
fontSize: 14,
fontFamily: 'Source Han Sans CN, Source Han Sans CN;',
fontWeight: 400,
color: '#34344C',
},
}
无参数:
有参数:
2:左上角文字标题字体偏移量:
title: {
text: '测试',
left: 20,
top: 10,
},
无参数:
有参数:
3:图例位置:
legend
legend: {
orient: 'vertical',
right: 10,
top: 10
},
无参数:
有参数:
4:横坐标显示刻度与轴线:
axisTick/axisLine
xAxis: {
axisTick: {
show: false
},
axisLine: {//坐标轴轴线
show: false
},
},
无参数:
有参数:
5:纵坐标显示刻度与轴线:
axisLabel/splitLine
yAxis: {
axisLabel: {//坐标轴刻度标签
show: false
},
splitLine: {//坐标轴在grid区域中的分割线
show: false
},
},
无参数:
有参数:
6:柱形图提示文字位置,提示内容,大小,偏移量:
label(series内每个子对象)
label: {
show: true,
position: 'top',
formatter: function (v) {
let data = xxx数据操作
return data//当前使用的是 return '文字'
},
fontSize: 10,
offset: [-30, 0] // y轴上不变,x轴向上偏移-30像素
},
无参数:
有参数:
7:柱形图柱子边角border-radius:
itemStyle(series内每个子对象)
无参数:
有参数:
8:柱形图柱子宽度:
barWidth(series内每个子对象)
barWidth: '15px', // 设置柱宽为系列宽度的15px
无参数:
有参数:
9:柱形图背景颜色,阴影:
showBackground(series内每个子对象),backgroundStyle
showBackground: true,
//两者同级
backgroundStyle: {
color: 'rgba(228, 222, 249, 1)',
shadowColor: 'rgba(190,172,241,100.79)',
shadowBlur: [30, 20, 70, 10],
},
无参数:
有参数:
10:y轴设置条数,及虚线:
splitNumber,splitLine
splitNumber:3,
splitLine:{
lineStyle: {
type: 'dashed' // 设置为虚线,可选值为 'solid', 'dashed', 或 'dotted'
}
}
无参数:
有参数:
11:x轴过长展示,添加滑动效果:
dataZoom
//和series同级
dataZoom: [
{
type: 'inside',
// 从哪里的百分比开始
start: 0,
end: 50,
},
],
无参数:
有参数:
echarts图表的点击事件,,点击累加的bug,自适应屏幕宽度
1:点击事件:
on(‘click’)
function getChartData () {
const columnCharts = echarts.init(document.getElementById('columnCharts')) // 图标初始化
columnCharts.setOption(option)
// name是横坐标 seriesName是数据名 value是纵坐标
columnCharts.on('click', function (params) {
//params的操作
})
}
注意,点击事件name是横坐标 seriesName是数据名 value是纵坐标。onclick一定要写在setOption之后,这里的params 对应的是你tooltip下trigger的值,如果设置为’axis‘ ,那么params就是当前x坐标下所有对应的y值的数据,如果设置为‘item’ ,那么就是当前x坐标下的鼠标移入的元素y值的数据。
2:点击事件的累加bug:
off(‘click’)
function getChartData () {
const columnCharts = echarts.init(document.getElementById('columnCharts')) // 图标初始化
columnCharts.off('click')
columnCharts.setOption(option)
columnCharts.on('click', function (params) {
xxx() //点击后执行一个方法
})
}
注意,处理事件的累加bug需要添加.off(‘click’) ,并且一定要写在setOption之前。不加此方法,就会有点击事件的累加bug(第一次点击图表会走xxx方法,第二次点击图表会走2遍xxx方法,以此类推…)
3:图表自适应屏幕大小,随意切换:
resize(‘click’)
function getChartData () {
const columnCharts = echarts.init(document.getElementById('columnCharts')) // 图标初始化
columnCharts.setOption(option)
// 监听窗口大小变化事件
window.onresize = function () {
// 重新设置图表的宽度和高度
columnCharts.resize();
}
}
无参数:
有参数:
注意,设置了此方法后,随意切换屏幕分辨率,图表可以自动刷新,图表会自动根据屏幕分辨率,重新画出对应图表。
ok,暂时先写这么多,如果帮到了大伙,记得点赞收藏哟。也可以进行评论,我会实时回复,继续完善。