实习生漂流记之echarts-for-react

在react（函数组件）项目中使用Echarts

我并没有直接按照在html中的使用方式，借助于echarts-for-react，安装方式：

$ npm install --save echarts-for-react
# `echarts` is the peerDependence of `echarts-for-react`, you can install echarts with your own version.
$ npm install --save echarts

开始想在react中使用echarts，但看了echars官网的示例代码后无从下手，经过不断尝试，找出了一个适合自己并且容易上手的方法，那便是echarts-for-react，关于echarts的基本内容官网给的很详细了，我便直接给出快速上手echarts官网的示例操作。
第一步：
创建一个组件，从echarts-for-react导入EChartsReact，然后在return中使用，还需要声明getOption函数，获取当前实例中维护的 option 对象，返回的 option 对象中包含了用户多次 setOption 合并得到的配置项和数据，也记录了用户交互的状态，代码如下：

import React from "react";
import EChartsReact from "echarts-for-react";

export default function MyEcharts() {
    let getOption = () => {
        //此处便是echarts中的代码、、、
        // 声明option 后 再return option
    }
    return(
        <>
            <EChartsReact  option={getOption()}></EChartsReact>
        </>
    )
}

然后打开echarts官网的示例（选择自己需要的示例即可），我找的如图所示：

选中代码编辑模块的代码，复制到函数组件相应的getOption中，代码如下（代码数据态度以图片方式展示）：

效果如图所示：

关于echats中的一些常用属性我在其他的示例中做了笔记，详细代码如下：

/*
 * @Autor: lingchen.liu
 * @Date: 2022-02-25 16:33:01
 * @LastEditors: lingchen.liu
 * @LastEditTime: 2022-02-26 13:54:01
 */
import React from "react";
import EChartsReact from "echarts-for-react";
// import * as echarts from 'echarts';

export default function ZheLine() {
        let getOption = ()=>{
            // 配置
            let option = {
                title: {
                    text: "凌晨示例"
                },
                // 触发提示框
                tooltip: {
                    // 触发类型 item: 只显示出触发转折点的内容、使用{a} {b}显示内容即可
                    // axis: 按X轴显示，该轴上的转折点都会被触发、使用{a0} b{0} {a1} {b1}
                    trigger: 'item',
                    // 提示框内容格式器 参数根据trigger不同而不同
                    // 折线、柱状、K线图：{a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
                    // 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
                    formatter: "名称：{a} <br>X轴： {b} <br>Y轴： {c}"
                },
                xAxis: {
                  type: 'category',
                  data: ['1', '2', '3', '4', '5', '6', '7'],
                  alignTicks:'true',
                  splitLine: { //分割线（网格线）
                      show: true,
                    //   interval: 'auto'
                    lineStyle: {
                        color:'#008c8c',
                        // type: "dashed", //分割线类型solid实线 dashed虚线
                        type: [2, 10],
                        dashOffset: 3
                    }
                  },
                  name: "X轴名称",// 坐标轴名称
                  show:true, //是否显示坐标刻度标签
                  nameLocation: "end", //名称位置 默认end
                  nameTextStyle: {
                      color: '#f40'
                  },
                  axisLabel: { //刻度标签
                    //   inside: "false", // 默认朝外
                      rotate: '-0', //旋转角度
                  },
                  axisTick: { //坐标刻度
                    show: false, //是否显示坐标刻度
                    alignWithLabel: 'true'
                  },
                  axisLine: {
                      show: false, // 是否显示作坐标轴线
                  },

                },
                yAxis: {
                  type: 'value',
                //   alignTicks:'false',
                  name:"Y轴名称"
                  
                },
                series: [
                  {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                  },
                  {
                    data: [45, 500, 224, 140, 45, 500, 54],
                    type: 'line'
                  },
                ]
              };
              return option;
        }
    return (
          <EChartsReact  option={getOption()}></EChartsReact>
    )
}

页面效果如下图所示：

今天的展示到此结束，下期见。