前言

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

具体步骤

• 首先安装echarts

  复制代码npm install echarts --save

  1
  2
  npm install echarts --save
  

• 接着安装echarts的react依赖库

  复制代码npm install echarts-for-react --save

  1
  2
  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%' } } ></ReactEcharts> ) } }

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  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" ], ...省略 }

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  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%' } } ></ReactEcharts> ) } }

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  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%' } }
  />
  )
  }
  }
  

最后

以上就是端庄小蚂蚁最近收集整理的关于React如何使用Echarts前言具体步骤的全部内容，更多相关React如何使用Echarts前言具体步骤内容请搜索靠谱客的其他文章。