react中使用echarts

先上一张效果图
React中 配置属性如下,可直接粘贴使用
复制代码
import React, { useEffect, useMemo, useState } from 'react'
import * as echarts from 'echarts'
import ReactECharts from 'echarts-for-react'
 
const LineChart = (props: any) => {
 
  const option = {
    color: ['#b5e200'],

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },

    grid: {
      show: false,
      top: 0,
      left: 0,
      right: 0,
      bottom: 20,
      containLabel: true,
    },
    xAxis: {
      show: true,
      type: 'category',
      boundaryGap: true,
      splitLine: {
        show: false,
        lineStyle: {
          type: [2, 6],
          color: '#64748B',
          opacity: 0.6,
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#64748B',
          fontFamily: 'Lexend',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        margin: 20,
        interval: 0,
      },
      data: ['02-10','02-11','02-12','02-13','02-14','02-15','02-16'],
    },
    yAxis: {
      type: 'value',
      position: 'right',
      min: 96,
      max: 100,
      splitLine: {
        show: true,
        lineStyle: {
          type: [2, 6],
          color: '#64748B',
          opacity: 0.6,
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#64748B',
          fontFamily: 'Lexend',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        inside: true,
        margin: 0,
        showMinLabel: false,
        showMaxLabel: false,
        verticalAlign: 'bottom', 
        formatter: function (value) {
          return value + '%'
        },
      },
    },
    series: [
      {
        name: 'category',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(181,226,0,5)',
            },
            {
              offset: 1,
              color: 'rgba(255,255,255,1)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [97.2,97.8,98.2,98.7,99.3,99.5,99.8],
      },
    ],
  }
return <ReactECharts option={option} style={{ height: 300 }} />
安装包依赖
复制代码
npm install echarts echarts-for-react --save
或
yarn add echarts echarts-for-react 
相关推荐
@小红花36 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵39 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
Chan1641 分钟前
【智能协同云图库】基于统一接口架构构建多维度分析功能、结合 ECharts 可视化与权限校验实现用户 / 管理员图库统计、通过 SQL 优化与流式处理提升数据
java·spring boot·后端·sql·spring·intellij-idea·echarts
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性