chart.js 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import {
  2. Chart,
  3. Axis,
  4. Line,
  5. Legend
  6. } from '@antv/f2';
  7. import {
  8. jsx as _jsx
  9. } from "@antv/f2/jsx-runtime";
  10. import {
  11. jsxs as _jsxs
  12. } from "@antv/f2/jsx-runtime";
  13. export default (({
  14. data
  15. }) => {
  16. return _jsxs(Chart, {
  17. data,
  18. children: [
  19. _jsx(Axis, {
  20. field: "label",
  21. tickCount: 12,
  22. style: {
  23. label: {
  24. align: 'between'
  25. },
  26. }
  27. }),
  28. _jsx(Axis, {
  29. field: "value",
  30. tickCount: 5
  31. }),
  32. _jsx(Line, {
  33. x: "label",
  34. y: "value",
  35. lineWidth: "4px",
  36. color: "type"
  37. }),
  38. _jsx(Legend, {
  39. position: "top",
  40. style: {
  41. justifyContent: 'space-around',
  42. },
  43. triggerMap: {
  44. press: (items, records, legend) => {
  45. const map = {};
  46. items.forEach((item) => (map[item.name] = _.clone(item)));
  47. records.forEach((record) => {
  48. map[record.type].value = record.value;
  49. });
  50. legend.setItems(_.values(map));
  51. },
  52. pressend: (items, records, legend) => {
  53. legend.setItems(items);
  54. },
  55. },
  56. })
  57. ]
  58. });
  59. });