Echarts is, needless to say, one of the most well-known visual chart libraries in the country. Echarts-for-react is a minimalist react wrapper for it.
One, foreword
🎉 echarts** V5 release **, echarts-for-React has a lot of requests to support the latest version of the issue, so, during the Spring Festival, the v3 version was upgraded to support the latest ECharts V5.
** It’s very embarrassing. At present, I am working for Ant, mainly doing big data BI products + AntV data visualization technology stack. In theory, Echarts is a competitive product. Haha, however, I am still upgrading it over the past year. I think this is the spirit of open source. ** Then by the way, let’s make an advertisement together, welcome everyone to support my current work.
- G2: Data visualization based on graphical syntax, providing flexibility and customization
- G2Plot: A g2-based plot has been encapsulated to reduce the cost of most simple scenarios
- Charts: A Library of React Charts components derived from Ant Design based on G2Plot
This article will focus on echarts and its React package.
Second, the origin of
Before Ant, I was at the front end of netease game pit. At that time, I was using SVG internally for code version control, so I made a SVG-oriented CI tool similar to Travis (but without GitHub Action). This project is my first time to learn React (version 0.14.x).
Echarts is easy to use on the React stack. However, there is no library out of the box on the React stack, so you have to find the DOM in the React environment and call echarts.init. So a React wrapper was made in the project and then opened source.
Before graduation, those who have done Java in school know that many Java package names will go to the 4J suffix, which means xx for Java. So because of inertia, it was named ** echarts-for-react**.
Three, positioning
It has to do with the habits and principles of making my own open source foreskin:
- Encapsulation should have its own clear positioning, do not over – encapsulation
- Transparent transmission of concepts, without adding data structures and technical concepts
- Conform to the conventions of the technology stack (add some development optimizations as needed according to the use nature of React)
So the main contents and features of this package include:
1. ClassName + style attribute
The React component is essentially a UI component. In my mind, each React component should have className and style attributes to customize its style.
2. The echarts.init parameter is used as the top props
The top-level API parameters, as the top-level props, are conceptually equivalent and easily understood by developers. These include:
- notMerge
- showLoading
- loadingOption
- opts.renderer
- .
3. Echarts Option fully transparent transmission
Echarts uses option to construct graphs, resulting in complete documentation and rich official website DEMO, making it very easy for developers to develop a graph, almost directly copy.
Echarts-for-react also fully pass-through options, with no modifications or even default values. The option copy in the official website code is still available.
This greatly reduces maintenance costs for myself, as well as debugging costs for fellow developers. “React failed. Try echarts’ official website.
4. Update or New on demand?
The package decides whether to create a new instance or update the old one for changes in the top props or options. Let developers just focus on props, which handles different operations for different props.
5. Automatically adapt the container size
This feature is arguably the core of the 200-line wrapper library, and diagrams are automatically resized according to the container size. For this purpose, I added a module called Size-Sensor (why not open source? Before using open source all kinds of problems, delay does not solve, so their own implementation of a simple some.
Automatic container sizing is a very, very necessary, almost necessary feature in today’s low-code and scaffolding products. There are also a large number of issues in G2 and G2Plot that I am in charge of at present.
6. Load on demand
The Echarts package itself is still quite large, approaching 1M after confusion. So load on demand is a feature of Echarts, and this module also takes core apart through some code architecture and lets developers decide how to subcontract and import on demand.
Four, upgrade,
Set a Flag for yourself, complete during the New Year to complete.
The main contents of this upgrade are as follows:
1. Complete the typescript
In React 0.14, I used props-types to check props, and then I wrote the ts type definition by myself. So this time write directly using TS, automatically generated type definition file.
The main reason, of course, is that when you come to ants, you basically write TS. It smells good. **
2. Single test coverage
Before, we used jest-canvas-mock for unit testing. After all, it was mock rather than real operation, so some logic tests failed and the coverage was not improved.
So this time it’s changed jest-electron, real operation, coverage directly increased to
However, the former is currently being downloaded at 2M per month and the latter at 4K.
3. New official website
The official website was completely built by myself when I first learned React. There was no Lint or CI, the code was messy, and the style was not pretty. Therefore, this time, the library dumi is directly used for automatic generation, and the website is fully developed by Markdown. It is also convenient for everyone to meet the typo on the official website and submit PR directly with one click.
The Example instance can also be navigated directly to other code editing tools with one click.
However, before we could put some Google AdSense on the official website, now we don’t know how to add a custom Google adsense component on dumi, slowly work on it!
4. A README typography
The project is very simple, the concept is very simple, so directly Readme as a document, but the previous document structure, style typesetting is messy, so according to the current personal aesthetic, write again!
Five, the last
From using Echarts before, to now doing AntV and big data products, I have been in the field of visualization. At present, AntV G2 has a lot of planning and content, which needs some students who are interested in visualization to join. If you are interested in the following, please contact me to submit your resume (my GitHub homepage has wechat account) :
- Big data, data analytics
- Visual construction, Low Code
- Data visualization technology
Welcome to AntV G2 5.0!