echarts图笔记

我的头发丝呢

已于 2022-02-28 16:44:02 修改

阅读量632

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： echarts 前端 javascript

于 2017-10-24 11:47:50 首次发布

本文链接：https://blog.youkuaiyun.com/qq_32970111/article/details/78327931

笔记专栏收录该内容

4 篇文章

订阅专栏

这篇博客主要介绍了如何调整Echarts中提示框(tooltip)的位置，以及如何通过设置itemStyle来改变饼图样式，同时讲解了如何调整grid以优化图的显示比例。还分享了折线区域图的配置方法，包括X轴和Y轴的颜色、线条样式以及数据标签的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

调整echarts里提示框的位置
tooltip : {
trigger : 'axis',
position : function(pos, params, dom, rect, size) {
//
var obj = {
top : '10%'
};

if (pos[0] > size.viewSize[0] / 4 * 3) {//鼠标位置大于屏幕宽度4分之三
obj[[ 'left', 'right' ][+(pos[0] < size.viewSize[0] / 2)]] = pos[0] / 8 * 6;
} else if (pos[0] >= size.viewSize[0] / 2
&& pos[0] < size.viewSize[0] / 4 * 3) {
//largethan equals one half and less than 3/4
obj[[ 'left', 'right' ][+(pos[0] < size.viewSize[0] / 2)]] = pos[0] / 8 * 7;
} else {
obj[[ 'left', 'right' ][+(pos[0] > size.viewSize[0] / 2)]] = pos[0];
}
return obj;
},
axisPointer : {
type : 'cross',
crossStyle : {
color : '#999'
}
}
}

通过设置itemStyle 进行调整

/* 取消饼图只是线和文字 */
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : false
},
labelLine : {
show : true
}
}
}

调整grid: 图显示比例

grid: {
top:'17%',
left:'17%',
right:'17%',
containLabel: false
},

折现区域图配置信息

option = {
tooltip : {
trigger: 'axis',
position : function(pos, params, dom, rect, size) {
// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
var obj = {
top : '10%'
};

if (pos[0] > size.viewSize[0] / 4 * 3) {//鼠标位置大于屏幕宽度4分之三
obj[[ 'left', 'right' ][+(pos[0] < size.viewSize[0] / 2)]] = pos[0] / 8 * 6;
} else if (pos[0] >= size.viewSize[0] / 2
&& pos[0] < size.viewSize[0] / 4 * 3) {
//largethan equals one half and less than 3/4
obj[[ 'left', 'right' ][+(pos[0] < size.viewSize[0] / 2)]] = pos[0] / 8 * 7;
} else {
obj[[ 'left', 'right' ][+(pos[0] > size.viewSize[0] / 2)]] = pos[0];
}
return obj;
},
axisPointer : {
type : 'line',
crossStyle : {
color : '#999'
}
}
},
/* legend: {
data:['活跃']
}, */
grid:{
top:'17%',
left:'10%',
right:'10%'
},
xAxis : [
{
type : 'category',
boundaryGap : false,
/* 字体颜色大小*/
axisLabel: {
show: true,
textStyle: {
color: '#8E9091'
},
},
/* X轴颜色大小 */
axisLine:{
lineStyle:{
color:'#8E9091',
width:2
}
},
data : 
}
],
yAxis : [
{
/* 字体颜色大小 */
axisLabel: {
show: true,
textStyle: {
color: '#8E9091'
},
},
/* y轴颜色大小 */
axisLine:{
lineStyle:{
color:'#8E9091',
width:2
}
},
/* 线条颜色大小*/
splitLine: {
lineStyle: {
// 使用深浅的间隔色
width:0.5 ,
color: ['#B8C6D9']
}
},
type : 'value'
}
],
series : [

{
name:'活跃',
type:'line',
label: {
normal: {
show: true,
position: 'top'
}
},
/* 填充颜色*/
areaStyle: {normal: {color:'#D8D6F9'}},
/* 线条颜色 */
itemStyle:{
normal:{
color:'#aa81f3'
}
},
data:
}
]
};