data.ts 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. import * as echarts from 'echarts/core'
  2. import {
  3. DatasetComponent,
  4. TitleComponent,
  5. TooltipComponent,
  6. GridComponent,
  7. TransformComponent
  8. } from 'echarts/components'
  9. import { LineChart } from 'echarts/charts'
  10. import { UniversalTransition } from 'echarts/features'
  11. import { CanvasRenderer } from 'echarts/renderers'
  12. echarts.use([
  13. DatasetComponent,
  14. TitleComponent,
  15. TooltipComponent,
  16. GridComponent,
  17. TransformComponent,
  18. LineChart,
  19. CanvasRenderer,
  20. UniversalTransition
  21. ])
  22. // 折线图
  23. export const echartsFu1 = (dom: HTMLDivElement) => {
  24. const myChart = echarts.getInstanceByDom(dom) || echarts.init(dom)
  25. const option = {
  26. grid: {
  27. left: '-30', //距左边边框的距离
  28. right: '0%', //距右边边框的距离
  29. bottom: '10', //距下面边框的距离
  30. top: '15', //距上面边框的距离
  31. containLabel: true
  32. },
  33. xAxis: {
  34. type: 'category',
  35. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  36. axisLine: {
  37. show: false //隐藏X轴
  38. },
  39. axisTick: {
  40. show: false //隐藏刻度线
  41. },
  42. axisLabel: {
  43. show: false //隐藏X轴文字
  44. }
  45. },
  46. yAxis: {
  47. type: 'value'
  48. },
  49. series: [
  50. {
  51. data: [182, 193, 988, 546, 454, 1111, 1200],
  52. type: 'line'
  53. // showSymbol: false,
  54. // smooth: true
  55. },
  56. {
  57. data: [820, 932, 901, 934, 1290, 1330, 1320],
  58. type: 'line'
  59. // showSymbol: false,
  60. // smooth: true
  61. }
  62. ],
  63. tooltip: {
  64. trigger: 'axis',
  65. axisPointer: {
  66. type: 'cross',
  67. label: {
  68. backgroundColor: '#6a7985'
  69. }
  70. },
  71. formatter: (val: any) => {
  72. return `${val[0].axisValue}<br/>入馆${val[0].data}件<br/>入藏${val[1].data}件`
  73. }
  74. }
  75. }
  76. option && myChart.setOption(option)
  77. }