// 引入 ECharts 核心模块,核心模块提供了 ECharts 使用必须要的接口。 import * as ECharts from 'echarts/core' // 引入柱状图图表,图表后缀都为 Chart import { BarChart, LineChart, TreeChart, PieChart } from 'echarts/charts' // 引入标题,提示框,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, LegendComponent } from 'echarts/components' // 标签自动布局、全局过渡动画等特性 import { LabelLayout, UniversalTransition } from 'echarts/features' // 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步 import { CanvasRenderer } from 'echarts/renderers' class EChartsComponent { constructor (el) { // 注册必须的组件 ECharts.use( [ TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, BarChart, LineChart, TreeChart, PieChart, LabelLayout, UniversalTransition, LegendComponent, CanvasRenderer ] ) // 默认颜色数组 const defaultColors = [ '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf', '#aec7e8', '#ffbb78', '#98df8a', '#ff9896', '#c5b0d5', '#c49c94', '#f7b6d2', '#c7c7c7', '#dbdb8d', '#9edae5', '#393b79', '#637939', '#8c6d31', '#843c39', '#7b4173', '#5254a3', '#6baed6', '#9e9ac8', '#807dba', '#6a51a3' ] const echartsInstance = ECharts.init(el) const handler = { get: function (target, prop) { if (prop === 'setOption') { return function (option, ...args) { // 合并颜色配置 const mergedOption = { color: defaultColors, ...option } // 调用原始的 setOption 方法 return target[prop](mergedOption, ...args) } } return target[prop] } } this.el = new Proxy(echartsInstance, handler) } getEl () { return this.el } // 更新默认颜色 setDefaultColors (colors) { this.defaultColors = colors } } export default EChartsComponent