【EChats】折线图—点线样式、下方区域渐变、平均值、十条固定其余滚动、y轴值与实际值不符、折线不同线段不同颜色

目录

折线点样式

折线点为图片

折线样式

折线下方区域渐变色

折线渐变区域渐变

平均值

显示十条数据，其余数据滚动显示

y轴值与实际值不符

折线不同线段不同颜色

---

折线点样式

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        // 折线
        lineStyle:{
          color: 'blue'
        },
        // 折线点
        itemStyle:{
            color: 'red',
        },
        symbol:'circle',
        symbolSize:[10,10]
    }]
};

折线点为图片

折线点图片，通过base64图片在线转换工具转成base64图片

效果不太对，还没有找到正确方式。

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      // 折线点为图片
      symbol:'data:image/png;base64,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',
      symbolSize: 20
    }
  ]
};

 解决方法就使用线上路径

var img = 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png';
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      // 折线点为图片
      symbol:'image://'+img,
      symbolSize: 20
    }
  ]
};

折线样式

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        // 折线样式
        lineStyle:{
            color:'red',
        },
        // 折线平滑
        smooth: true
    }]
};

折线下方区域渐变色

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0,0,0,1, [
                {
                    offset: 0,
                    color: "#0EF0F0"
                },
                {
                    offset: 1,
                    color: "transparent"
                }
            ])
        }
    }]
};

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {
            normal: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#638FFF'
                    },
                    {
                        offset: 1,
                        color: 'rgba(248,65,126,0.90)'
                    }],
                    globalCoord: false
                }
            }
        }
    }]
};

折线渐变区域渐变

默认状态和悬浮状态

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',

      //线条样式
      itemStyle: {
        color: '#6A5ACD', 
        normal: {  
            lineStyle: {    
              width: 2, 
              type: 'solid', 
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                  offset: 0, 
                  color: '#0000FF' 
              }, { 
                  offset: 1, 
                  color: '#CD5C5C' 
              }]),
            } 
        }, 
        emphasis: {
          color: '#6A5ACD',   
          lineStyle: {      
              width: 2, 
              type: 'dotted', 
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                  offset: 0, 
                  color: '#1E90FF' 
              }, { 
                  offset: 1, 
                  color: '#0000FF' 
              }]) 
          } 
        } 
    },

    //区域颜色渐变
    areaStyle:{
        normal:{
          //颜色渐数 四个参数表示四个位置左、下、右、上
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(80,141,255,0.39)'
            }, {
                offset: .34,
                color: 'rgba(56,155,255,0.25)'
            },{
                offset: 1,
                color: 'rgba(38,197,254,0.00)'
            }])

        }
      },
    }
  ]
};

参考链接：折线图线条渐变色

平均值

markline会自动计算data里边所有数值和的平均值，你只需要简单地配置就能生成一条美丽的平均线，

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        markLine: {
            data: [{
                type: 'average',
                name: '平均值'
            }],
            lineStyle: {
                type: 'solid'
            }
        },
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

显示十条数据，其余数据滚动显示

// 数据
var data = [150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260]

// 获取数据的个数
var dataLen = data.length;

// 控制条长度
function computedPosition(len,dataLen) {
    if(dataLen>=10){
        return len <= 10 ? 35 : (100 -   Math.floor(35 / len * 100));
    }else{
        return 100;//小于十条数据显示全部
    }
}

// 配置dataZoom
var option = {
    dataZoom: [
      {
          type: 'slider',
          show: true,
          handleSize: 2,
          height: '15px',
          start:0 ,
          end: computedPosition(1,dataLen)//dataLen是x轴返回的数据的个数
      },
      {
          type: 'inside',
          start: 40,  // start和end来设置滚动条的长度来控制数据的条数
          end: 100
      },
      {
          type: 'slider',
          show: false,
          yAxisIndex: 0,
          filterMode: 'empty',
          width: 3,
          height: '70%',
          handleSize: 2,
          showDataShadow: false,
          left: '93%'
      }
    ],
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data,
        type: 'line'
      }
    ]
}

y轴值与实际值不符

option = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
  ]
};

问题就出在stack: 'Total'，只要删除就好。

option = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
  ]
};

参考：echarts折线图 y轴刻度数值与获取的值不符显示错误问题

折线不同线段不同颜色

var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
var option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  visualMap: {
    top: 10,
    right: 10,
    pieces: [
      {
        gt: 600,
        lte: 900,
        color: '#096'
      }, {
        gt: 900,
        lte: 1200,
        color: '#ffde33'
      },
      {
        gt: 1200,
        lte: 1500,
        color: '#ff0000'
      }
    ]
  },
  series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
   }]
}

var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
var option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  visualMap: {
    top: 10,
    right: 10,
    pieces: [
      {min: 1500}, // 不指定 max，表示 max 为无限大（Infinity）。
      {min: 900, max: 1500},
      {min: 310, max: 1000},
      {min: 200, max: 300},
      {min: 10, max: 200, label: '10 到 200（自定义label）'},
      {value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。
      {max: 5}     // 不指定 min，表示 min 为无限大（-Infinity）。
  ]
  },
  series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
   }]
}

参考：ECharts实现折线不同线段不同颜色