项目需求:
折线图hover 时拐点大小不变;hover时拐点内空心点填充为实心,定义拐点颜色,边框线大小以及颜色等,下面简单演示修改拐点样式:
option = {
title: {
text: '堆叠区域图'
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'搜索引擎',
type:'line',
symbol:'circle',//拐点设置为实心
symbolSize:8,//拐点大小
stack: '总量',
animation:true,//false: hover圆点不缩放 .true:hover圆点默认缩放
lineStyle:{
normal:{
color:'red',//折线的颜色
width:'2'//折线粗细
}
},
itemStyle:{
normal:{
color:'red',//拐点颜色
borderColor:'#000000',//拐点边框颜色
borderWidth:3//拐点边框大小
},
emphasis: {
color: '#000000'//hover拐点颜色定义
}
},
areaStyle: {normal: {
color:'#999999'//折线下面区块的颜色
}},
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
Echarts官网:https://echarts.baidu.com/
Echarts文档可参考:https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-myw22daw.html