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折线图的样式修改的主要内容,如果未能解决你的问题,请参考以下文章

echarts折线图某个点变色,改变样式

echarts折线图某个点变色,改变样式

echarts折线图某个点变色,改变样式

echarts 设置折线图单个数据小圆圈样式

echarts itemStyle 折线图原点样式调整

echarts折线图个性化填充线条拐点样式