第一步，先局部安装echarts，默认安装最新版
在根目录下执行命令
npm install echarts --save
安装成功之后
在node_modules中可以看到echarts文件夹

image.png

第二步，在react的js文件中引入echarts组件

// 引入主模块
import echarts  from 'echarts/dist/echarts.common';
// 引入折线图
import 'echarts/lib/chart/line';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

第三步，创建一个div盒子装echarts图表，盒子必须设置宽高

 render() {
        return (
            <div  id="main" className={cns('wrapper', styles.box)}> 
                图表
            </div>
        );
    }

第四步，配置数据

 componentDidMount() {
        var base = +new Date(1968, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var date = [];

        var data = [Math.random() * 300];

        for (var i = 1; i < 20000; i++) {
            var now = new Date(base += oneDay);
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
        }
   
     // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            tooltip: {
                // 当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。
                trigger: 'axis',
                // 提示框的位置
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: 'center',
                text: '大面积量数据图'
            },
            // toolbox：这是ECharts中的工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
            toolbox: {
                // feature 各工具配置项: dataZoom 数据区域缩放;restore 配置项还原;saveAsImage下载为图片;magicType动态类型切换
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'  // y轴不缩放，Index默认为0
                    },
                    restore: {},
                    saveAsImage: {}

                    // ,magicType: {
                    //     type: ['bar', 'line']
                    // }
                }
            },
            xAxis: {
                type: 'category', // category为一级分类,适用于离散的类目数据   
                boundaryGap: false,  // 无间隙
                data: date
            },
            yAxis: {
                type: 'value', // 'value' 数值轴，适用于连续数据。
                boundaryGap: [0, '100%'] // 分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，
            },
            dataZoom: [{                 // 内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系 
                type: 'inside',
                start: 0,
                end: 10
            }, {
                start: 0,
                end: 10,                  // handleIcon 手柄的 icon 形状，支持路径字符串
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',        //  控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
                handleStyle: {
                    color: 'pink',
                    shadowBlur: 3,      // shadowBlur图片阴影模糊值，shadowColor阴影的颜色
                    shadowColor: 'red',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }],
            series: [
                {
                    name: '模拟数据',
                    type: 'line',
                    smooth: true,  // 开启平滑处理。true的平滑程度相当于0.5
                    symbol: 'none', // 标记的图形。
                    sampling: 'average', //  取过滤点的平均值
                    itemStyle: {                
                        normal: {
                            color: 'rgb(255, 70, 131)' //  图形的颜色。
                        }
                    },
                    areaStyle: {    // 区域填充样式。
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(255, 158, 68)'
                            }, {
                                offset: 1,
                                color: 'rgb(255, 70, 131)'
                            }])
                        }
                    },
                    data: data
                }
            ]
        });
    }

效果图，在鼠标hover上去的时候会有信息提示

大面积量数据图.png