Install

npm install @zym-com/text-rich

or

yarn add @zym-com/text-rich

Import

import TextRich from "@zym-com/text-rich";
import "@zym-com/text-rich/dist/style.css";

Usage

import TextRich from "@zym-com/text-rich";
import "@zym-com/text-rich/dist/style.css";

function App() {
  const options ={
    "configuration": {
        "dataSourceType": "data",
        "dataContent": "",
        "domToCanvans": false,
        "boxFillStyle": "color",
        "boxColor": {
            "startVal": "rgba(0,0,0,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 50
        },
        "boxImage": "",
        "boxImageSize": "cover",
        "boxBorderGroup": {
            "shadowOffsetX": "right",
            "shadowOffsetY": "bottom",
            "shadowBlur": "left",
            "shadowColor": "top"
        },
        "boxBorderStyle": "solid",
        "boxBorderWidth": 1,
        "boxBorderColor": "rgba(24, 144, 255,0)",
        "boxBorderRadius": 0,
        "marqueeOpen": true,
        "duration": 30,
        "axisType": "Y",
        "reverseType": true,
        "pauseOnHover": true,
        "overflowType": "scroll",
        "scrollbarWidth": 4,
        "scrollbarColor": "rgba(255,255,255,0)",
        "scrollbarRadius": 10,
        "scrollbarThumbColor": "rgba(76,76,76,1)",
        "scrollbarThumbRadius": 10,
        "dataSeries": [
            {
                "originalContent": "",
                "newContent": ""
            }
        ],
        "boxBackground": false,
        "boxBorderConfig": false,
        "scrollbarStyle": true
    },
    "base": {
        "width": 500,
        "height": 200
    },
    "dataSource": [
        {
            "value": "<div class='content_18313' data-spm-anchor-id='C73544894212.P59511941341.0.i1'><div class='title_area' id='title_area'><h1>可视化|“十四五”科技创新开局良好，这些数据很亮眼！</h1><h2 id='subtitle' style='display: none;'><i></i></h2><div class='info'>来源：<a data-spm-protocol='i' href='https://kepu.gmw.cn/2022-02/26/content_35547232.htm ' target='_blank'>光明网</a>  |  2022年02月27日 10:34:53</div><div class='info1'>光明网 | 2022年02月27日 10:34:53</div><h6 id='sourcetitle'>原标题：可视化|“十四五”科技创新开局良好，这些数据很亮眼！</h6><script type='text/javascript'>var sourcetitle = '可视化|“十四五”科技创新开局良好，这些数据很亮眼！';if (sourcetitle==''){document.getElementById('sourcetitle').style.display='none';}</script></div><div class='text_area' id='text_area' style='display: block;'></div><div class='more_btnbox' id='j_pullLoader' style='display: none;'><div class='more_btn_loading ' id='j_loading'><span class='loadingbtn'></span><span class='more_btn'>正在加载</span></div></div><div class='content_area' id='content_area' style='display: block;'><!--repaste.body.begin--><p data-spm-anchor-id='C73544894212.P59511941341.0.i0'>　　2月25日，国新办就科技创新有关进展情况举行发布会，科学技术部部长王志刚表示，2021年是党和国家历史上具有重要意义的一年，也是“十四五”开局之年。过去一年，全社会研发投入达到2.79万亿元，同比增长14.2%，研发投入强度达到了2.44%，国家创新能力综合排名上升至世界第12位，成功实现“十四五”良好开局。</p><p class='photo_img_20190808' style='text-align: center;'><img src='//p4.img.cctvpic.com/photoworkspace/contentimg/2022/02/27/2022022710331520371.jpg' alt='可视化|“十四五”科技创新开局良好，这些数据很亮眼！'></p><p class='photo_alt_20190808' style='text-align: center;'>　　</p><p class='photo_img_20190808' style='text-align: center;'><img src='//p5.img.cctvpic.com/photoworkspace/contentimg/2022/02/27/2022022710331546882.jpg' alt='可视化|“十四五”科技创新开局良好，这些数据很亮眼！'></p><p class='photo_alt_20190808' style='text-align: center;'>　　</p><p class='photo_img_20190808' style='text-align: center;'><img src='//p2.img.cctvpic.com/photoworkspace/contentimg/2022/02/27/2022022710331560346.jpg' alt='可视化|“十四五”科技创新开局良好，这些数据很亮眼！'></p><p class='photo_alt_20190808' style='text-align: center;'>　　</p><p class='photo_img_20190808' style='text-align: center;'><img src='//p4.img.cctvpic.com/photoworkspace/contentimg/2022/02/27/2022022710331568955.jpg' alt='可视化|“十四五”科技创新开局良好，这些数据很亮眼！'></p><p class='photo_alt_20190808' style='text-align: center;'>　　</p><p class='photo_img_20190808' style='text-align: center;'><img src='//p1.img.cctvpic.com/photoworkspace/contentimg/2022/02/27/2022022710331597570.jpg' alt='可视化|“十四五”科技创新开局良好，这些数据很亮眼！'></p><!--repaste.body.end--></div></div>"
        }
    ],
    bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
  }
  return (
    <>
      <TextRich {...options} />
    </>
  );
}

export default App;