echarts-for-react&echarts切换主题功能

echarts-for-react的切换主题功能

之前使用echarts时我都是按照官网的代码来，没有使用过echarts-for-react，最近开发时发现它很方便，但是我不知道它如何实现换肤功能，所以就找了echarts-for-react的文档。

在echarts-for-react文档中找到了设置主题的方法，只需要添加theme，theme是注册的主题名字，echarts默认有两种主题dark和light，这两种都不适合我的项目，所以我需要自己配置主题。

import React from 'react';
import ReactECharts from 'echarts-for-react';  // or var ReactECharts = require('echarts-for-react');

<ReactECharts
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={}
/>

如何配置主题？

import mytheme from './mytheme.json'
echarts.registerTheme('mytheme ', mytheme )

导入json文件然后使js用echarts. registerTheme方法注册，就可以直接在<ReactECharts/>使用了。

json文件可以在下边的地址里导出，在里边配好颜色再导出比较方便，剩下不合适的可以找到对应的地方修改。这样的话option里就不用配颜色了。在之后的项目里也可以直接使用配好的json文件，再也不用一个一个找颜色了

主题编辑器：主题编辑器 - Apache ECharts

文档地址：echarts-for-react - npm