阅读 288
React Hooks之EChars的基础使用

React Hooks之EChars的基础使用

这是我参与8月更文挑战的第28天,活动详情查看:8月更文挑战

写在前面:

  • 本文作为本人学习总结之用,同时分享给大家~
  • 个人前端博客网站:zhangqiang.hk.cn
  • 欢迎加入博主的前端学习qq交流群::706947563专注前端开发,共同学习进步

本文将使用的技术栈为:

  • React Hooks
  • Echars

react 官网:zh-hans.reactjs.org/docs/hooks-…

EChars官网:echarts.apache.org/zh/tutorial…

1 安装react框架

npx create-react-app my-app
cd my-app
npm start
复制代码

2 安装Echars包

npm install echarts --save
复制代码

3 开始使用

3.1 基础柱状图

image-20210828201322334

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 基础折线图

0

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 基础扇形图

image-20210828202557615

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官网的配置项手册,真是好用啊!不多说,直接上链接:echarts.apache.org/zh/option.h…

然后这是本文写的例子的github源码:github.com/JACK-ZHANG-…

文章分类
前端
文章标签