β
Cutting edge: Have recently demand began to contact data visualization development, research and experience the domestic several larger data visualization solutions provider, and will be involved in the development of some tools for screening, often see a junior partner in the community feedback related aspects of the demand, so take this opportunity to share me with some of the tools, Later development is completed and then share the experience in the whole process
β
1. Preliminary research
β
Before development, please refer to the existing excellent data big screen solution providers in China, as follows: π
β
- Ali Cloud (DataV) document link
- Netease has several (EasyScreen) document links
- Tencent Cloud (Tencent Cloud) document link
β
However, these vendors are all paid versions, but Aliyun and netease have a free trial period of 15 days
β
2. Functional anatomy
Through preliminary research, I have roughly sorted out the functions needed for a simple large screen visual editing of data, including the following points
3. Tool recommendations
β
After functional dissection, disassemble the functional modules involved. Different modules involve functions such as charts, drag and drop, stretch and shrink, code editor, image export, grid layout, dynamic forms, etc. If your front-end team is small and cannot independently develop these functional modules involved, You can solve these problems by using mature open source tools that exist in the community to avoid reinventing the wheel
β
3.1 Antv
β
Official introduction: AntV is ant Financial’s new generation of data visualization solutions, committed to providing a set of simple, professional and reliable data visualization best practices with unlimited possibilities. Data large screen development, can be used to do component control areas such as pie charts, ring graphs and other rendering
β
Antv has many product lines. I mainly use G2Plot chart library out of the box, which is easy to use. In addition, Ant Financial also uses G2Plot for Its ChartCube chart rubik’s Cube, which mainly uses Antv to make graphs online and quickly generate official links of code ChartCube
3.2 Codemirror
β
Codemirror is an online code editor that can highlight code in real time, and many popular online code editors are based on Codemirror. It can be used for data source management in large screen development, and supports online editing code official website link
β
There are also developers that have packaged vue and React versions on top of the original
vue-codemirrorοΌDocument linksreact-codemirror:Document links
It can also be used if you are configuring a JSON data source
jsoneditor:Document links
3.3 the Vue. Draggable (Sortable. Js)
β
Vue.Draggable is a Vue drag-drop component based on sortable.js. It allows drag and drop and view synchronization, based on and provides all the functions of sortable.js, data large screen development, can be used to do control drag function, drag different controls to the canvas to form a large screen. Document links
β
If you don’t want to use a library, you can build directly on H5’s Drag and Drop apis by setting the Draggable property to True on the elements you want to Drag
3.4 the vue draggable — the resizable
β
Vue-draggable – Resizable components are used for resizable and dragable elements that have no third-party library dependencies. Data large screen development, can be used to do the canvas component size adjustment. Document links
β
3.5 the vue – the grid – layout
β
Vue-grid-layout is a grid layout system similar to Gridster, suitable for vue.js. Inspired by The React-grid-Layout, it is simply a vUE raster drag Layout component, used to implement drag-and-drop VUE Layout. Data large screen development, can be used for the layout of components in the canvas. Document links
β
3.6 html2canvas
β
Html2canvas can easily help you convert HTML code into Canvas. In data large-screen development, it can be used to generate large-screen pictures and share data through static image generation. Document links
β
3.7 vcolorpicker
β
Vcolorpicker is a vUE colorpicker component modeled after Angular’s color-picker plugin. It can be used for background color selection and document links in large screen data development
β
However, it is recommended to use a third-party component library ColorPicker, such as element component library ColorPicker, for a better user experience
3.8 the vue – form – maker
β
Vue-form-maker is a vUE dynamically generated form component that can be configured based on data, but the UI library used is iView, which you can modify depending on which component library you use. In data large screen development, it can be used to dynamically generate document links of basic attributes and other forms in the component area
β
You can also refer to π² Jang’s previous work on developing dynamic forms from 0 to 1
4. Article Easter eggs
Just before digging gold LV4 time, have a small partner ridicule tree sauce said, “tree sauce gentleman, you want” women “(ah stay you see you take a good rhythm), tree sauce I this 180 big strong man women is shady, or do not tarnish the community this piece of pure land. So I change the form of a civilized point, tree sauce jun has been very fond of music, usually singing π€ is also an indispensable pleasure in my life, a jay Chou’s “I believe so” (quick hand web page version) to you support my small partner π«
π² sauce previous articles:
- Construction of front-end Knowledge System of Tree Jam (PART 1)
- Construction of front-end Knowledge System of Tree Jam (Part 2)
- Talk about daily collaboration tools for front-end development
- Babel configuration is stupid
- How to better manage the Api
- The interviewer asks you about Node
- Front-end engineering stuff
- Did you learn BFF and Serverless
- Front-end operations and deployment
Please drink a cup π΅ remember three even oh ~
1. Remember to give π² sauce a thumbs up after reading oh, there is π motivation
2. Pay attention to the interesting things at the front of the public account, and chat with you about the interesting things at the front
3. Github frontendThings thanks to Starβ¨