React Hooks之EChars的基础使用

啦啦啦啦

发布于 2023-02-27 14:18:06

4550

发布于 2023-02-27 14:18:06

文章被收录于专栏：啦啦啦啦前端

本文将使用的技术栈为：

React Hooks
Echars

react 官网：https://zh-hans.reactjs.org/docs/hooks-state.html#gatsby-focus-wrapper

EChars官网：https://echarts.apache.org/zh/tutorial.html#5 分钟上手 ECharts

1 安装react框架

npx create-react-app my-app
cd my-app
npm start

2 安装Echars包

npm install echarts --save

3 开始使用

3.1 基础柱状图

import React, { useEffect } from "react";
import * as echarts from 'echarts';

const Child1Item = props => {

  const initChart = () => {
    let element = document.getElementById('chart1');
    let myChart = echarts.init(element);
    myChart.clear()
    let option;
    option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }]
    };

    option && myChart.setOption(option);
  }

  useEffect(() => {
    initChart()
  }, [])

  return (
    <div id='chart1' style={{ width: '80%', margin: '0 auto', height: '600px' }}></div>
  )
}

export default Child1Item;

3.2 基础折线图

import React, { useEffect } from "react";
import * as echarts from 'echarts';

const Child2Item = props => {

  const initChart = () => {
    let element = document.getElementById('chart2');
    let myChart = echarts.init(element);
    myChart.clear()
    let option;
    option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }]
    };

    option && myChart.setOption(option);
  }

  useEffect(() => {
    initChart()
  }, [])

  return (
    <div id='chart2' style={{ width: '80%', margin: '50px auto', height: '600px' }}></div>
  )
}

export default Child2Item;

3.3 基础扇形图

import React, { useEffect } from "react";
import * as echarts from 'echarts';

const Child3Item = props => {

  const initChart = () => {
    let element = document.getElementById('chart3');
    let myChart = echarts.init(element);
    myChart.clear()
    let option;
    option = {
      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: '视频广告' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    option && myChart.setOption(option);
  }

  useEffect(() => {
    initChart()
  }, [])

  return (
    <div id='chart3' style={{ width: '80%', margin: '50px auto', height: '600px' }}></div>
  )
}

export default Child3Item;

这里推荐ECharts官网的配置项手册，真是好用啊！不多说，直接上链接：https://echarts.apache.org/zh/option.html#title

然后这是本文写的例子的github源码：https://github.com/JACK-ZHANG-coming/react-demo-project

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-05-09，如有侵权请联系 cloudcommunity@tencent.com 删除

https