如何在react中简单应用echart，及echart特性

一分钟学会在react中简单应用echart

1.首先安装echart、echarts-for-react

npm install echarts --save
npm install --save echarts-for-react

2、在相应组件中引入模块

import * as echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';

3、使用的时候非常简单

用的时候只需要在官网找到你需要的的模板，将里面的option里的代码复制在下方你自己写代码里的option里，根据需求改变相应的数据
官网
可以直接点击进入各个案例
找到想要的，例如：

必须要的代码

import React,{Component}from 'react'export default class Pie extends Component {getOption = ()=>{let option = {//粘贴上面复制过来的代码};return option;};render() {return (<div><ReactEcharts option={this.getOption()}/></div>)}
}

完毕，就这么简单，附个自己使用的案例

import React, { Component } from 'react'
import * as echarts from 'echarts';import ReactEcharts from 'echarts-for-react';import "./money.css"export default class money extends Component {getOption = () => {let option = {tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 200, 150, 80, 70, 110, 130],type: 'bar'}]};return option;};getOptionTwo = () => {let optionTwo = {title: {text: '药品各类别销量统计',subtext: '（单位：件/年）',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left',},series: [{name: '销售量',type: 'pie',radius: '50%',data: [{ value: 1048, name: '颗粒剂' },{ value: 735, name: '丸剂' },{ value: 580, name: '散剂' },{ value: 484, name: '酊剂' },{ value: 300, name: '片剂' },{ value: 500, name: '胶囊剂' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]}return optionTwo;}render() {return (<div className="col-md-10"><h2>营业额统计</h2><div className="col-md-6 "><ReactEcharts option={this.getOption()} /><p>药品每月销售总额（单位：/万元）</p></div><div className="col-md-6 "><ReactEcharts option={this.getOptionTwo()} /></div></div>)}
}

效果图

echart特性

** 1、丰富的可视化类型提供了常规的图，盒形图，用于地理数据可视化的图，用于关系数据可视化的图，多维数据可视化的平行坐标，并且支持图与图之间的混搭
2、多种数据格式无需转换直接使用 ECharts 内置的 dataset 属性（4.0+）通过简单的设置 encode 属性就可以完成从数据到图形的映射。
3、千万数据的前端展现 ECharts 同时提供了对流加载（4.0+）的支持，可以使用 WebSocket 或者对数据分块后加载，不需要漫长地等待所有数据加载完再进行绘制
4、移动端优化例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。
5、多渲染方案，跨平台使用不同的渲染方式提供了更多选择，使得 ECharts 在各种场景下都有更好的表现。
6、深度的交互式数据探索提供了图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作
7、多维数据的支持以及丰富的视觉编码手段 ECharts 3 开始加强了对多维数据的支持。除了加入了平行坐标等常见的多维数据可视化工具外，对于传统的散点图等，传入的数据也可以是多个维度的。配合视觉映射组件 visualMap 提供的丰富的视觉编码，能够将不同维度的数据映射到颜色，大小，透明度，明暗度等不同的视觉通道
8、动态数据 ECharts 由数据驱动，数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单，只需要获取数据，填入数据，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。配合 timeline 组件能够在更高的时间维度上去表现数据的信息。
36 / 89
9、绚丽的特效 ECharts 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。
10、通过 GL 实现更多更强大绚丽的三维可视化提供了基于 WebGL 的 ECharts GL，你可以跟使用 ECharts 普通组件一样轻松的使用 ECharts GL 绘制出三维的地球，建筑群，人口分布的柱状图，在这基础之上还提供了不同层级的画面配置项，几行配置就能得到艺术化的画面。
11、无障碍访问（4.0+）支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。）**