The latest articles on DEV Community by yuhongda (@yuhongda). https://dev.to/yuhongda https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F755178%2F644c2a06-4459-440c-9a9b-d2ee38a36d0c.png https://dev.to/yuhongda en yuhongda Wed, 15 Jun 2022 10:10:55 +0000 https://dev.to/yuhongda/maybe-the-better-way-to-echarts-4n1k https://dev.to/yuhongda/maybe-the-better-way-to-echarts-4n1k <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/yuhongda"> yuhongda </a> / <a href="https://github.com/yuhongda/echarts-readymade"> echarts-readymade </a> </h2> <h3> Make echarts come in handy for React. Based on echarts-for-react </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <h1> 📦 echarts-readymade</h1> <blockquote> <p>Make echarts come in handy for React. Based on <a href="https://github.com/hustcc/echarts-for-react">echarts-for-react</a></p> </blockquote> <p><a rel="noopener noreferrer" href="https://user-images.githubusercontent.com/259410/149259067-f410c199-bf21-4f84-9121-35d46a75e465.jpeg"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zZ6UYCyn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://user-images.githubusercontent.com/259410/149259067-f410c199-bf21-4f84-9121-35d46a75e465.jpeg" alt="CC0328C6BAADA3C93D3DA9B093ED5908 (1)"></a></p> <h2> Content</h2> <ul> <li><a href="https://github.com/yuhongda/echarts-readymade#-features">Features</a></li> <li> <a href="https://github.com/yuhongda/echarts-readymade#installation">Installation</a> <ul> <li><a href="https://github.com/yuhongda/echarts-readymade#therere-some-differences-between-the-two-ways-of-installation-below">Explanations</a></li> </ul> </li> <li><a href="https://github.com/yuhongda/echarts-readymade#usage">Usage</a></li> <li><a href="https://github.com/yuhongda/echarts-readymade#options">Options</a></li> <li><a href="https://github.com/yuhongda/echarts-readymade#qa">Q/A</a></li> <li><a href="https://github.com/yuhongda/echarts-readymade#roadmap">Roadmap</a></li> </ul> <h2> 🎨 Features</h2> <ul> <li> 🌈 Easy to use (provide default layout and style)</li> <li> 🌟 Available components: <code>&lt;Bar /&gt;</code> <code>&lt;Line /&gt;</code> <code>&lt;Pie /&gt;</code> <code>&lt;Stack /&gt;</code> <code>&lt;Scatter /&gt;</code> <code>&lt;Wordcloud /&gt;</code> <code>&lt;BarHorizontal /&gt;</code> <code>&lt;Table /&gt;</code> </li> <li> 🎁 Support <code>Compare Dimension</code>, which means you can indicate another dimension field to compare base on one dimension.</li> <li> 💪 Typescript support</li> </ul> <h2> Installation</h2> <p>👉 Full Installation</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-s1">npm</span> <span class="pl-s1">install</span> <span class="pl-c1">--</span><span class="pl-s1">save</span> <span class="pl-s1">echarts</span><span class="pl-c1">-</span><span class="pl-s1">readymade</span> <span class="pl-c1">OR</span> <span class="pl-s1">yarn</span> <span class="pl-s1">add</span> <span class="pl-s1">echarts</span><span class="pl-c1">-</span><span class="pl-s1">readymade</span></pre> </div> <p>👉 Install What You Need</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-s1">npm</span> <span class="pl-s1">install</span> <span class="pl-c1">--</span><span class="pl-s1">save</span> @<span class="pl-s1">echarts</span><span class="pl-c1">-</span><span class="pl-s1">readymade</span><span class="pl-c1">/</span><span class="pl-s1">core</span> <span class="pl-s1">npm</span> <span class="pl-s1">install</span> <span class="pl-c1">--</span><span class="pl-s1">save</span> @<span class="pl-s1">echarts</span><span class="pl-c1">-</span><span class="pl-s1">readymade</span><span class="pl-c1">/</span><span class="pl-s1">line</span> <span class="pl-c1">OR</span> <span class="pl-s1">yarn</span> <span class="pl-s1">add</span> @<span class="pl-s1">echarts</span><span class="pl-c1">-</span><span class="pl-s1">readymade</span><span class="pl-c1">/</span><span class="pl-s1">core</span> <span class="pl-s1">yarn</span> <span class="pl-s1">add</span> @<span class="pl-s1">echarts</span><span class="pl-c1">-</span><span class="pl-s1">readymade</span><span class="pl-c1">/</span><span class="pl-s1">line</span></pre> </div> <h3> There're some differences between the two ways of installation below.</h3> <blockquote> <ol> <li>Obviously, the way of 'Install What You Need' will…</li> </ol> </blockquote> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/yuhongda/echarts-readymade">View on GitHub</a></div> </div> echarts react javascript typescript