React如何使用Echarts

前言

最近工作中需要實現數據統計面板，需要使用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%' } }
                 />
     		)
     }
  }