前言

最近工作中需要实现数据统计面板，需要使用chart工具库，于是尝试了国内常见的chart工具Echarts，笔者使用的是React技术栈，这里就展示一下React如何使用Echarts (这里用的是Echarts3)

具体步骤

• 首先安装echarts

  npm install echarts --save
  

• 接着安装echarts的react依赖库

  npm install echarts-for-react --save
  

• 最后在项目中使用:

  import ReactEcharts from 'echarts-for-react';
  class ChartDemo extends React.Component {
  	render() {
  		const option = {...此处省略};
  		return (
  			<ReactEcharts
                  option={ option }
                  style={ { height:'400px', width:'100%' } }
              />
  		)
  	}
  }
  

• 当然你也可以自定义主题，建议通过这个网址来可视化定义自己的主题，然后导出配置，将配置中的theme复制到一个单独的文件中并导出，就像这样子:

  export default {
     seriesCnt: "3",
     backgroundColor: "rgba(252,252,252,0)",
     titleColor: "#666666",
     subtitleColor: "#999999",
     textColorShow: false,
     textColor: "#333",
     markTextColor: "#ffffff",
     color: [
         "#3fb1e3",
         "#6be6c1",
         "#626c91",
         "#a0a7e6",
         "#c4ebad",
         "#96dee8"
     ],
     ...省略
  }
  

  然后再项目中这样用:

  import ReactEcharts from 'echarts-for-react';
  import customTheme from './customTheme';
  import echarts from 'echarts';
  
  class ChartDemo extends React.Component {
     componentWillMount() {
         echarts.registerTheme('custom-theme', customTheme);
     }
     
     render() {
     		const option = {...此处省略};
     		return (
     			<ReactEcharts
                     theme="custom-theme"
                     option={ option }
                     style={ { height:'400px', width:'100%' } }
                 />
     		)
     }
  }