echarts 自定义图表参考
type: ‘custom’ https://echarts.apache.org/zh/option.html#series-custom.type
https://blog.csdn.net/WuLex/article/details/78828301
image.png

format

xAxis.axisLabel.formatter
https://echarts.apache.org/zh/option.html#xAxis.axisLabel.formatter

  1. {
  2.   xAxis: {
  3.     name: '时间',
  4.     type: 'time',
  5.     interval: 3600 * 1000, // 以一个小时递增
  6.     // x轴零刻度对应的实际值，将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
  7.     min: '2009/6/1 1:00',
  8.     axisLabel: {
  9.       color: '#9da5b2',
  10.       formatter: '{HH}:{mm}',
  11.     }
  12.   }
  13. }

options

  1. /**
  2.  * Description: 用条形图的不同颜色，来表示不同时间区间段的状态
  3.  * y轴用于展示各网口
  4.  * x轴用于展示时间(分钟)
  5.  * 以 ECS为例
  6.  * 图中则表示了0~10分钟为正常，10~25分钟为繁忙，25~45分钟为故障，45~60分钟为离线
  7.  */
  9. import moment from 'moment';
  10. import * as echarts from 'echarts/core';
  12. function getzf(num) {
  13.   if (parseInt(num) < 10) {  num = '0' + num; }
  14.   return num;
  15. }
  17. // 各状态的颜色
  18. const color = ['#61a0a8', '#d48265', '#c23531'];
  19. // 状态
  20. const state = ['正常', '故障', '离线'];
  21. // 设备
  22. const deviceData = ['ECS', 'RDS', 'REDIS'];
  24. export function getOption({ length, theme}) {
  26.   return {
  27.     color,
  28.     grid: {
  29.       top: length === 1 ? 24 : 40,
  30.       left: 24,
  31.       right: 40,
  32.       bottom: 32,
  33.       containLabel: true,
  34.     },
  35.     xAxis: {
  36.       name: '时间',
  37.       type: 'time',
  38.       interval: 3600  * 1000, // 以一个小时递增
  39.       // x轴零刻度对应的实际值，将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
  40.       min:'2009/6/1 1:00',
  41.       axisLabel: {
  42.         color: '#9da5b2',
  43.         formatter: (value) => { // value 时间戳
  44.           console.log('value', value)
  45.           return moment(value).format('HH:mm');
  46.         },
  47.       }
  48.     },
  49.     yAxis: {
  50.       name: '设备',
  51.       data: deviceData,
  52.     },
  53.     series: [
  54.       // 用空bar来显示四个图例
  55.       { name: state[0], type: 'bar', data: [] },
  56.       { name: state[1], type: 'bar', data: [] },
  57.       { name: state[2], type: 'bar', data: [] },
  58.       {
  59.         type: 'custom',
  60.         // 自定义的图形元素渲染逻辑，通过 renderItem 函数实现的
  61.         renderItem: (params, api) => {
  62.           // api.value(0) 取出当前 dataItem 中第一个维度的数值
  63.           const categoryIndex = api.value(0)
  64.           // 用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值
  65.           const start = api.coord([api.value(1), categoryIndex])
  66.           const end = api.coord([api.value(2), categoryIndex])
  67.           const height = api.size([0, 1])[1];
  69.           return {
  70.             type: 'rect', // 图形元素是矩形。还可以是 'circle' 'sector' 'polygon'
  71.             // 矩形的位置和大小
  72.             shape: echarts.graphic.clipRectByRect(
  73.               {
  74.                 x: start[0],
  75.                 y: start[1] - height / 2,
  76.                 width: end[0] - start[0],
  77.                 height: height,
  78.               },
  79.               {
  80.                 x: params.coordSys.x,
  81.                 y: params.coordSys.y,
  82.                 width: params.coordSys.width,
  83.                 height: params.coordSys.height,
  84.               }
  85.             ),
  86.             style: api.style(),
  87.           }
  88.         },
  89.         encode: {
  90.           x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
  91.           y: 0, // data 中『维度0』对应到 Y 轴
  92.         },
  93.         data: [
  94.           {
  95.             itemStyle: { normal: { color: color[0] } },
  96.             name: '正常',
  97.             // 0 代表y轴的索引，1,2代表x轴数据开始和结束
  98.             value: [0, '2009/6/1 1:28', '2009/6/1 5:00'],
  99.           },
  100.           {
  101.             itemStyle: { normal: { color: color[1] } },
  102.             name: '故障',
  103.             value: [0, '2009/6/1 6:13', '2009/6/1 8:22']
  104.           },
  106.           // 第二个数据; 1 代表第二个数据
  107.           {
  108.             itemStyle: { normal: { color: color[0] } },
  109.             name: '正常',
  110.             value: [1, '2009/6/1 1:28', '2009/6/1 5:00'],
  111.           },
  112.           {
  113.             itemStyle: { normal: { color: color[0] } },
  114.             name: '正常',
  115.             value: [1, '2009/6/1 6:13', '2009/6/1 8:22']
  116.           },
  117.           {
  118.             itemStyle: { normal: { color: color[1] } },
  119.             name: '故障',
  120.             value: [1, '2009/6/1 12:47', '2009/6/1 14:52']
  121.           },
  123.           // 第三个数据; 2 代表第三个数据
  124.           {
  125.             itemStyle: { normal: { color: color[0] } },
  126.             name: '正常',
  127.             value: [2, '2009/6/1 1:28', '2009/6/1 5:00'],
  128.           },
  129.           {
  130.             itemStyle: { normal: { color: color[2] } },
  131.             name: '离线',
  132.             value: [2, '2009/6/1 14:52', '2009/6/1 17:00']
  133.           },
  134.         ],
  135.       },
  136.     ],
  137.     tooltip: {
  138.       formatter: (params) => {
  139.         const { name, value} = params;
  140.         const [a,x, y] = value;
  141.         return `${deviceData[a]}-${name}: ${x} ~ ${y}`;
  142.       },
  143.     },
  144.     legend: {
  145.       data: state,
  146.       bottom: 8,
  147.       selectedMode: false, // 图例设为不可点击
  148.       textStyle: {
  149.         color: theme === 'dark' ? '#fff' : '#333',
  150.       },
  151.     },
  152.   };
  153. }

在线离线柱图

image.png

  1. import * as echarts from 'echarts/core';
  3. const state = ['在线', '离线'];
  4. const color = ['#41c669', '#ff6160']
  6. function onlineToOffline({ dataSource, theme, color = ['#41c669', '#ff6160'] }) {
  7.   const _options = {
  8.     color,
  9.     xAxis: {
  10.       min: 0, // x轴零刻度对应的实际值
  11.     },
  12.     yAxis: {
  13.       // type: 'category',
  14.       // boundaryGap: false,
  15.       // data: dataSource.map(it => it.label), // ['REDIS', 'ECS']
  16.       axisTick: {
  17.         lineStyle: { color: '#c1c5ca41' },
  18.         alignWithLabel: true,
  19.       },
  20.       splitLine: { show: false },
  21.       axisLine: { lineStyle: { color: 'rgba(0,0,0,0)' } },
  22.       axisLabel: { color: '#9da5b2', fontSize: 11, overflow: 'break' },
  23.     },
  24.     series: [
  25.       // 用 空bar来显示图例
  26.       { name: state[0], type: 'bar', data: [] },
  27.       { name: state[1], type: 'bar', data: [] },
  28.       {
  29.         type: 'custom',
  30.         renderItem: (params, api) => {
  31.           const categoryIndex = api.value(0);
  32.           const start = api.coord([api.value(1), categoryIndex]);
  33.           const end = api.coord([api.value(2), categoryIndex]);
  34.           const height = 24;
  36.           return {
  37.             type: 'rect',
  38.             shape: echarts.graphic.clipRectByRect(
  39.               {
  40.                 x: start[0],
  41.                 y: start[1] - height / 2,
  42.                 width: end[0] - start[0],
  43.                 height,
  44.               },
  45.               {
  46.                 x: params.coordSys.x,
  47.                 y: params.coordSys.y,
  48.                 width: params.coordSys.width,
  49.                 height: params.coordSys.height,
  50.               }
  51.             ),
  52.             style: api.style(),
  53.           };
  54.         },
  55.         encode: {
  56.           x: [1, 2],
  57.           y: 0,
  58.         },
  59.         data: [
  60.           {
  61.             itemStyle: { normal: { color: color[0] } },
  62.             name: state[0],
  63.             value: [0, 0, 45],
  64.           },
  65.           {
  66.             itemStyle: { normal: { color: color[1] } },
  67.             name: state[1], // 离线
  68.             value: [0, 45, 50],
  69.           },
  70.           {
  71.             itemStyle: { normal: { color: color[0] } },
  72.             name: state[0],
  73.             value: [0, 50, 60],
  74.           },
  75.         ],
  76.       },
  77.     ],
  78.     tooltip: {
  79.       trigger: 'axis',
  80.       backgroundColor: 'rgba(50,50,50,.8)',
  81.       textStyle: {
  82.         fontSize: 12,
  83.         color: '#ccc',
  84.       },
  85.       enterable: true,
  86.       extraCssText: 'max-height: 300px; overflow: auto;',
  87.       appendToBody: true,
  88.     },
  89.     legend: {
  90.       data: state,
  91.       icon: 'rect',
  92.       top: -4,
  93.       itemWidth: 12,
  94.       itemHeight: 8,
  95.       textStyle: {
  96.         fontSize: 12,
  97.         color: theme === 'dark' ? '#fff' : '#333',
  98.       },
  99.       selectedMode: false, // 图例设为不可点击
  100.     },
  101.     grid: {
  102.       top: 32,
  103.       right: 8,
  104.       bottom: 0,
  105.       left: 0,
  106.       containLabel: true, // 防止标签溢出
  107.     },
  108.   };
  110.   return _options;
  111. }
  113. export default onlineToOffline;

https://www.jb51.net/article/149502.htm