echarts制作grafana 面板之折线图

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

实现效果如下

实现代码

javascript 复制代码
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);
相关推荐
Bellafu66636 分钟前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird3 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者4 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强4 小时前
Chrome和IE获取本机ip地址
前端
天***88964 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*4 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v5 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls5 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友5 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵5 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构