如何在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+） 支持自动根据图表配置项智能生成描述，使得盲人可 以在朗读设备的帮助下 了解 图表内容，让图表可以被更多人群访问。）**