码迷,mamicode.com
首页 > 其他好文 > 详细

Echarts折线图的样式修改

时间:2019-12-19 19:05:52      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:线图   code   pre   type   lines   art   data   问题   false   

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折线图的样式修改

标签:线图   code   pre   type   lines   art   data   问题   false   

原文地址:https://www.cnblogs.com/NZ12/p/12069279.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!