React如何使用Echarts前言具体步骤

65 阅读 0 评论 43 点赞

我是靠谱客的博主端庄小蚂蚁，最近开发中收集的这篇文章主要介绍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%' } }
/>
)
}
}