echarts制作grafana 面板之折线图

最近有需求需要制作grafana 来实现自己的需求，于是开始研究

实现效果如下

实现代码

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'dark');
var option;

function getLast30Days() {
  let dates = [];
  let today = new Date();

  for (let i = 0; i < 30; i++) {
    let date = new Date();
    date.setDate(today.getDate() - i);
    let month = date.getMonth() + 1; // 月份是从0开始的，所以需要加1
    let day = date.getDate();
    dates.push(`${month}/${day}`);
  }

  return dates.reverse(); // 反转数组以使日期从过去到现在排列
}
option = {
  title: {
    text: '脏数据展示面板',
    subtext: '这是副标题',
    sublink: 'https://github.com/ecomfe/echarts-stat',
    left: 'center'
  },
  backgroundColor: '#181b1f',
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#181b1f',
    borderWidth: 0,
    padding: 0,
    textStyle: {
      color: 'rgba(255,255,255,0.7)'
    },
    formatter: function (params) {
      // 自定义符号样式，可以使用 HTML 标签来实现
      var content = `<div style="border:1px solid rgba(255,255,255,0.2);border-radius:4px"><div style="padding: 3px 8px;border-bottom:1px solid rgba(255,255,255,0.2)">${params[0].axisValue}</div><div style="padding:3px 8px;display:flex;align-items:center"><span style="display:inline-block;width:15px;height:4px; margin-right:5px;background-color:#73bf69;border-radius:4px"></span><span>${params[0].seriesName}</span><span style="margin-left:20px">${params[0].value}</span></div></div>`;
      return content;
    },
    axisPointer: {
      type: 'cross',
      lineStyle: {
        opacity: 0.5
      },
      crossStyle: {
        opacity: 0.5
      },
      label: {
        show: false
      }
    }
  },
  legend: {
    show: true,
    itemHeight: 4,
    itemWidth: 15,
    icon: 'rect',
    data: ['脏数据'],
    bottom: 'bottom'
  },

  xAxis: {
    type: 'category',
    boundaryGap: false, //设置从坐标轴开始显示
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: true
    },

    data: getLast30Days(),
    minorSplitLine: {
      show: true
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        join: 'miterLimit',
        miterLimit: 10
      }
    },
    //次分割线
    minorSplitLine: {
      show: false,
      lineStyle: {
        color: '#ffffff',
        opacity: 1
      }
    }
  },
  //显示渐变线条
  //   visualMap: [
  //   {
  //     show: false,
  //     type: 'continuous',
  //     seriesIndex: 0,
  //     min: 0,
  //     max: 60,
  //     inRange: {
  //           color: ['#73bf69', 'rgba(115,191,105,.4)', '#73bf69'],
  //           symbolSize: [50, 20]
  //       }
  //   },

  // ],
  series: [
    {
      data: [
        10, 20, 24, 18, 28, 30, 20, 28, 30, 24, 20, 16, 27, 20, 10, 20, 24, 18,
        28, 30, 20, 28, 30, 24, 20, 16, 27, 20, 20, 28
      ],
      name: '脏数据',
      type: 'line',
      smooth: false, //设置平滑曲线
      showSymbol: false, //设置是否显示折现顶点的图标
      lineStyle: {
        color: '#73bf69',
        width: 1
      },
      itemStyle: {
        color: '#73bf69'
      },
      areaStyle: {
        color: '#73bf69',
        opacity: 0.1
      } //填充背景
    }
  ]
};

option && myChart.setOption(option);