echarts 折线图

半兽人 发表于: 2023-04-20   最后更新时间: 2023-04-26 15:04:44  
{{totalSubscript}} 订阅, 464 游览

例一:

简单的折线图,优化如下:

  1. 隐藏x和y轴的标识
  2. 设置区域颜色。
  3. 加粗线,并制定颜色。
option = {
  grid: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  },
  xAxis: {
    show: false,
    type: 'category'
  },
  yAxis: {
    show: false,
    type: 'value'
  },
  series: [
    {
      data: [50, 70, 71, 34, 37, 44, 100],
      type: 'line',
      smooth: true,
      symbol: 'none',
      lineStyle: {
        color: '#5ac1e1',
        width: 5
      },
      areaStyle: {
        color: '#d8eff9'
      }
    }
  ]
};

在线运行

例二:

option = {
  title: {
    left: 'center',
    top: 'middle',
    textStyle: {
      fontSize: 12,
      color: '#ccc'
    },
    text: '我是标题'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'time',
    splitNumber: 6,
    show: false,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {}
  },
  yAxis: {
    show: false,
    max: 44.13,
    min: 0,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      margin: 20,
      textStyle: {
        align: 'left',
        baseline: 'bottom'
      }
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: '#ccc',
        width: 0.5,
        type: 'dotted'
      }
    }
  },
  color: ['#3DCCA6', '#39F'],
  legend: {
    itemWidth: 10,
    itemHeight: 10,
    left: 0,
    top: 0,
    padding: [0, 0, 5, 0],
    data: [
      {
        name: 'CPU使用率 (%)',
        icon: 'rect',
        textStyle: {
          fontSize: 14,
          color: '#3DCCA6'
        }
      },
      {
        name: '内存使用率 (%)',
        icon: 'rect',
        textStyle: {
          fontSize: 14,
          color: '#39F'
        }
      }
    ]
  },
  grid: {
    left: 0,
    right: 0,
    top: 20,
    bottom: 10
  },
  series: [
    {
      name: 'CPU使用率 (%)',
      type: 'line',
      lineStyle: {
        normal: {
          width: 2
        }
      },
      areaStyle: {
        normal: {
          opacity: 0.1
        }
      },
      smooth: true,
      data: [
        [1681985820000, '6.47'],
        [1681985880000, '5.66'],
        [1681985940000, '14.18'],
        [1681986000000, '6.31'],
        [1681986060000, '8.31'],
        [1681986120000, '6.37'],
        [1681986180000, '6.37'],
        [1681986240000, '6.31'],
        [1681986300000, '6.03'],
        [1681986360000, '5.71'],
        [1681986420000, '5.23'],
        [1681986480000, '5.84'],
        [1681986540000, '7.75'],
        [1681986600000, '7.18'],
        [1681986660000, '12.05'],
        [1681986720000, '5.98'],
        [1681986780000, '6.16'],
        [1681986840000, '6.78'],
        [1681986900000, '5.57'],
        [1681986960000, '4.46'],
        [1681987020000, '5.81'],
        [1681987080000, '7.41'],
        [1681987140000, '6.44'],
        [1681987200000, '5.30'],
        [1681987260000, '7.99'],
        [1681987320000, '6.69'],
        [1681987380000, '6.45'],
        [1681987440000, '5.98'],
        [1681987500000, '5.50'],
        [1681987560000, '6.02'],
        [1681987620000, '6.39'],
        [1681987680000, '7.85'],
        [1681987740000, '6.50'],
        [1681987800000, '9.12'],
        [1681987860000, '6.73'],
        [1681987920000, '5.38'],
        [1681987980000, '6.89'],
        [1681988040000, '6.34'],
        [1681988100000, '4.99'],
        [1681988160000, '5.83'],
        [1681988220000, '5.73'],
        [1681988280000, '10.77'],
        [1681988340000, '6.90'],
        [1681988400000, '14.42'],
        [1681988460000, '6.38'],
        [1681988520000, '6.57'],
        [1681988580000, '5.98'],
        [1681988640000, '5.41'],
        [1681988700000, '6.93'],
        [1681988760000, '5.56'],
        [1681988820000, '5.35'],
        [1681988880000, '6.54'],
        [1681988940000, '5.80'],
        [1681989000000, '8.90'],
        [1681989060000, '7.32'],
        [1681989120000, '5.49'],
        [1681989180000, '7.59'],
        [1681989240000, '5.98'],
        [1681989300000, '6.62'],
        [1681989360000, '5.13'],
        [1681989420000, '6.59']
      ]
    },
    {
      name: '内存使用率 (%)',
      type: 'line',
      lineStyle: {
        normal: {
          width: 2
        }
      },
      areaStyle: {
        normal: {
          opacity: 0.1
        }
      },
      smooth: true,
      data: [
        [1681985820000, '37.38'],
        [1681985880000, '37.39'],
        [1681985940000, '42.91'],
        [1681986000000, '43.13'],
        [1681986060000, '41.18'],
        [1681986120000, '42.97'],
        [1681986180000, '40.29'],
        [1681986240000, '37.37'],
        [1681986300000, '37.36'],
        [1681986360000, '37.36'],
        [1681986420000, '37.36'],
        [1681986480000, '37.35'],
        [1681986540000, '42.77'],
        [1681986600000, '42.95'],
        [1681986660000, '42.81'],
        [1681986720000, '42.96'],
        [1681986780000, '37.32'],
        [1681986840000, '37.32'],
        [1681986900000, '37.31'],
        [1681986960000, '37.31'],
        [1681987020000, '37.31'],
        [1681987080000, '40.75'],
        [1681987140000, '42.99'],
        [1681987200000, '40.25'],
        [1681987260000, '42.92'],
        [1681987320000, '43.00'],
        [1681987380000, '37.28'],
        [1681987440000, '37.28'],
        [1681987500000, '37.27'],
        [1681987560000, '37.27'],
        [1681987620000, '37.26'],
        [1681987680000, '39.31'],
        [1681987740000, '42.90'],
        [1681987800000, '41.22'],
        [1681987860000, '43.03'],
        [1681987920000, '40.14'],
        [1681987980000, '37.23'],
        [1681988040000, '37.22'],
        [1681988100000, '37.22'],
        [1681988160000, '37.21'],
        [1681988220000, '37.21'],
        [1681988280000, '42.85'],
        [1681988340000, '42.99'],
        [1681988400000, '41.43'],
        [1681988460000, '42.99'],
        [1681988520000, '37.19'],
        [1681988580000, '37.18'],
        [1681988640000, '37.18'],
        [1681988700000, '37.17'],
        [1681988760000, '37.16'],
        [1681988820000, '37.36'],
        [1681988880000, '42.92'],
        [1681988940000, '42.96'],
        [1681989000000, '42.61'],
        [1681989060000, '42.82'],
        [1681989120000, '37.14'],
        [1681989180000, '37.13'],
        [1681989240000, '37.12'],
        [1681989300000, '37.12'],
        [1681989360000, '37.12'],
        [1681989420000, '40.32']
      ]
    }
  ],
  markLine: {
    animation: false,
    symbol: '',
    data: [
      {
        name: '80',
        yAxis: 80,
        lineStyle: {
          normal: {
            color: '#e41e2b',
            width: 1,
            type: 'dotted'
          },
          emphasis: {
            width: 1
          }
        },
        label: {
          normal: {
            show: true,
            position: 'middle',
            formatter: '{b}%'
          }
        }
      },
      {
        name: '60',
        yAxis: 60,
        lineStyle: {
          normal: {
            color: '#f83',
            width: 1,
            type: 'dotted'
          },
          emphasis: {
            width: 1
          }
        },
        label: {
          normal: {
            show: true,
            position: 'middle',
            formatter: '{b}%'
          }
        }
      }
    ]
  }
};

在线运行

更新于 2023-04-26
在线,3小时前登录

查看echarts更多相关的文章或提一个关于echarts的问题,也可以与我们一起分享文章