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开始的，所以需要加1let 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);