Echarts折线图的样式修改
Posted nz12
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echarts折线图的样式修改相关的知识，希望对你有一定的参考价值。
option 内属性： //------------------------------------------------------------------------------------------------------------- legend: { data: [‘提现人数‘], align: ‘left‘, left: 10 },
//-------------------------------------------------------------------------------------------------------------
// X轴数据隔一个显示 通过设置 interval
axisLabel: {
interval: 1
}
//--------------------------------------------------------------------------------------------------------------------------------
// 可以矫正Y轴数据和折线图数据不匹配的问题 并去掉series内stack属性
yAxis: {
type: ‘value‘,
// 可以矫正Y轴数据和折线图数据不匹配的问题 并去掉series内stack属性
min: 0,
max: 18,
data: [0, 3, 6, 9, 12, 15, 18]
},
series: [
{
name:‘邮件营销‘,
type:‘line‘,
stack: ‘总量‘,
data:[120, 132, 101, 134, 90, 230, 210]
}
]
//----------------------------------------------------------------------------------------------------------------------------
// 折线图样式改变为曲线 通过true/false 控制 smooth: false,
series: [
{
name: ‘提现人数‘,
smooth: false,
type: ‘line‘,
data: [5, 0, 7, 2, 1, 5, 1, 2, 3, 4, 5, 0, 0, 16, 2, 5, 7, 3, 1, 5, 2, 7, 2, 5, 6, 0, 2, 5, 3, 3],
}
}
]
//-------------------------------------------------------------------------------------------------------------------------------
// 折线的宽度颜色修改
//1.
series: [
{
name: ‘提现人数‘,
smooth: false,
type: ‘line‘,
data: [5, 0, 7, 2, 1, 5, 1, 2, 3, 4, 5, 0, 0, 16, 2, 5, 7, 3, 1, 5, 2, 7, 2, 5, 6, 0, 2, 5, 3, 3],
// 折线的宽度颜色修改
lineStyle: {
normal: {
color: ‘#61a2ec‘,
width: 2
}
}
}
]
//2. 与series同级添加color 需对应匹配
color: [‘#61a2ec‘]
以上是关于Echarts折线图的样式修改的主要内容，如果未能解决你的问题，请参考以下文章