侧边栏壁纸
博主头像
江祎铭博主等级

不知江月待何人

  • 累计撰写 177 篇文章
  • 累计创建 3 个标签
  • 累计收到 120 条评论
标签搜索

目 录CONTENT

文章目录

在React项目中引入echarts球形水波纹

江祎铭
2023-03-17 / 0 评论 / 0 点赞 / 380 阅读 / 842 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-03-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告 广告

1、插件官网:https://www.npmjs.com/package/echarts-liquidfill

2、在项目中安装echarts和echarts-liquidfill

npm install echarts
npm install echarts-liquidfill

目前安装版本:

image.png

3、新建一个WaterChart.tsx文件,引入echarts和echarts-liquidfill

import { FC, useEffect } from 'react';
import * as echarts from 'echarts';
import 'echarts-liquidfill';
import React from 'react';
 
const LiquidCharts: FC = () => {
  useEffect(() => {
    initChart();
  });
 
  const initChart = () => {
    const liquid = document.getElementById('main');
    const map = echarts.init(liquid as HTMLDivElement);
    const option = {
      series: [
        {
          type: 'liquidFill',
          data: [0.6, 0.5, 0.4, 0.3],
          animationDuration: 0,
          animationDurationUpdate: 2000,
          animationEasingUpdate: 'cubicOut',
        },
      ],
    };
    map.clear()
    map.setOption(option);
  };
 
  return <div id='main' style={{ width: 800, height: 800 }} />;
};
 
export default LiquidCharts;

4、在需要展示的地方引入WaterChart文件就可以了

import WaterChart from './WaterChart.tsx'
<WaterChart />

5、结果展示

image.png

0
广告 广告

评论区