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']
 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM