eCharts.js 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. // 引入 ECharts 核心模块,核心模块提供了 ECharts 使用必须要的接口。
  2. import * as ECharts from 'echarts/core'
  3. // 引入柱状图图表,图表后缀都为 Chart
  4. import { BarChart, LineChart, TreeChart, PieChart } from 'echarts/charts'
  5. // 引入标题,提示框,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
  6. import {
  7. TitleComponent,
  8. TooltipComponent,
  9. GridComponent,
  10. DatasetComponent,
  11. TransformComponent,
  12. LegendComponent
  13. } from 'echarts/components'
  14. // 标签自动布局、全局过渡动画等特性
  15. import { LabelLayout, UniversalTransition } from 'echarts/features'
  16. // 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  17. import { CanvasRenderer } from 'echarts/renderers'
  18. class EChartsComponent {
  19. constructor (el) {
  20. // 注册必须的组件
  21. ECharts.use(
  22. [
  23. TitleComponent,
  24. TooltipComponent,
  25. GridComponent,
  26. DatasetComponent,
  27. TransformComponent,
  28. BarChart,
  29. LineChart,
  30. TreeChart,
  31. PieChart,
  32. LabelLayout,
  33. UniversalTransition,
  34. LegendComponent,
  35. CanvasRenderer
  36. ]
  37. )
  38. // 默认颜色数组
  39. const defaultColors = [
  40. '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd',
  41. '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf',
  42. '#aec7e8', '#ffbb78', '#98df8a', '#ff9896', '#c5b0d5',
  43. '#c49c94', '#f7b6d2', '#c7c7c7', '#dbdb8d', '#9edae5',
  44. '#393b79', '#637939', '#8c6d31', '#843c39', '#7b4173',
  45. '#5254a3', '#6baed6', '#9e9ac8', '#807dba', '#6a51a3'
  46. ]
  47. const echartsInstance = ECharts.init(el)
  48. const handler = {
  49. get: function (target, prop) {
  50. if (prop === 'setOption') {
  51. return function (option, ...args) {
  52. // 合并颜色配置
  53. const mergedOption = {
  54. color: defaultColors,
  55. ...option
  56. }
  57. // 调用原始的 setOption 方法
  58. return target[prop](mergedOption, ...args)
  59. }
  60. }
  61. return target[prop]
  62. }
  63. }
  64. this.el = new Proxy(echartsInstance, handler)
  65. }
  66. getEl () {
  67. return this.el
  68. }
  69. // 更新默认颜色
  70. setDefaultColors (colors) {
  71. this.defaultColors = colors
  72. }
  73. }
  74. export default EChartsComponent