https://echarts.apache.org/examples/zh/editor.html?c=custom-profile
图表选择

技术点

  1. 显示图例的方法，使用空的条形图来显示图例
  2. 在series里面配置了条形图并配置name后，echart会自动根据 name的值去 legend的配置中匹配对应的图例名字并显示。

image.png

options

series中的 custom，data字段

  1. data: [
  2.   {
  3.     itemStyle: { normal: { color: color[0] } },
  4.     name: '正常',
  5.     value: [0, 0, 10],
  6.   }
  7. ]
  • itemStyle: 所渲染的矩形的样式
  • name: 该矩形的状态名
  • value: 第0项代表 yAxis类别标识，
    • 例如0就代表 ECS的，1就是 RDS的；
    • 第1和第2项代表该矩形区域对应的x坐标范围开始于0，结束于1

options配置

  1. /**
  2.  * Description: 用条形图的不同颜色，来表示不同时间区间段的状态
  3.  * y轴用于展示各网口
  4.  * x轴用于展示时间(分钟)
  5.  * 以 ECS为例
  6.  * 图中则表示了0~10分钟为正常，10~25分钟为繁忙，25~45分钟为故障，45~60分钟为离线
  7.  */
  8. import * as echarts from 'echarts/core';
  10. // 各状态的颜色
  11. const color = ['#2f4554', '#61a0a8', '#d48265', '#c23531'];
  12. // 四种状态
  13. const state = ['正常', '繁忙', '故障', '离线'];
  15. // import { getColor } from '@/components';
  16. export function getOption({data, xData, length, theme}) {
  18.   return {
  19.     color,
  20.     grid: {
  21.       top: length === 1 ? 24 : 40,
  22.       left: 24,
  23.       right: 40,
  24.       bottom: 32,
  25.       containLabel: true,
  26.     },
  27.     xAxis: {
  28.       name: '时间',
  29.       min: 0, // x轴零刻度对应的实际值
  30.     },
  31.     yAxis: {
  32.       name: '设备',
  33.       data: ['ECS', 'RDS'],
  34.     },
  35.     series: [
  36.       // 用空bar来显示四个图例
  37.       { name: state[0], type: 'bar', data: [] },
  38.       { name: state[1], type: 'bar', data: [] },
  39.       { name: state[2], type: 'bar', data: [] },
  40.       { name: state[3], type: 'bar', data: [] },
  41.       {
  42.         type: 'custom',
  43.         renderItem: function (params, api) {
  44.           const categoryIndex = api.value(0)
  45.           const start = api.coord([api.value(1), categoryIndex])
  46.           const end = api.coord([api.value(2), categoryIndex])
  47.           const height = 24
  49.           return {
  50.             type: 'rect',
  51.             shape: echarts.graphic.clipRectByRect(
  52.               {
  53.                 x: start[0],
  54.                 y: start[1] - height / 2,
  55.                 width: end[0] - start[0],
  56.                 height: height,
  57.               },
  58.               {
  59.                 x: params.coordSys.x,
  60.                 y: params.coordSys.y,
  61.                 width: params.coordSys.width,
  62.                 height: params.coordSys.height,
  63.               }
  64.             ),
  65.             style: api.style(),
  66.           }
  67.         },
  68.         encode: {
  69.           x: [1, 2],
  70.           y: 0,
  71.         },
  72.         data: [
  73.           {
  74.             itemStyle: { normal: { color: color[0] } },
  75.             name: '正常',
  76.             value: [0, 0, 10],
  77.           },
  78.           {
  79.             itemStyle: { normal: { color: color[1] } },
  80.             name: '繁忙',
  81.             value: [0, 10, 25],
  82.           },
  83.           {
  84.             itemStyle: { normal: { color: color[2] } },
  85.             name: '故障',
  86.             value: [0, 25, 45],
  87.           },
  88.           {
  89.             itemStyle: { normal: { color: color[3] } },
  90.             name: '离线',
  91.             value: [0, 45, 60],
  92.           },
  94.           // 第二个数据 1 代表第二个数据
  95.           {
  96.             itemStyle: { normal: { color: color[0] } },
  97.             name: '正常',
  98.             value: [1, 0, 20],
  99.           },
  100.           // {
  101.           //   itemStyle: { normal: { color: color[1] } },
  102.           //   name: '繁忙',
  103.           //   value: [1, 15, 20],
  104.           // },
  105.           {
  106.             itemStyle: { normal: { color: color[2] } },
  107.             name: '故障',
  108.             value: [1, 20, 35],
  109.           },
  110.           // {
  111.           //   itemStyle: { normal: { color: color[3] } },
  112.           //   name: '离线',
  113.           //   value: [1, 35, 40],
  114.           // },
  115.           {
  116.             itemStyle: { normal: { color: color[0] } },
  117.             name: '正常',
  118.             value: [1, 35, 60],
  119.           },
  120.           // {
  121.           //   itemStyle: { normal: { color: color[3] } },
  122.           //   name: '离线',
  123.           //   value: [1, 45, 60],
  124.           // },
  125.         ],
  126.       },
  127.     ],
  128.     tooltip: {
  129.       formatter: (params) => {
  130.         const { name, value} = params;
  131.         return `${name}: ${value[1]} ~ ${value[2]}`;
  132.       },
  133.     },
  134.     legend: {
  135.       data: state,
  136.       bottom: 8,
  137.       selectedMode: false, // 图例设为不可点击
  138.       textStyle: {
  139.         color: theme === 'dark' ? '#fff' : '#333',
  140.       },
  141.     },
  142.   };
  143. }