If you know something about visualization, you should know that a datav large screen visualization tool of a cloud platform, the author bought a personal version last year, and directly dragged on the page can be really strong. Recently, the platform sent me an email, saying that my personal version datav expired, I wanted to renew the lease, but I found that the previous personal version was off the shelf, only the enterprise version, professional version, supreme version, the cheapest enterprise version 4800 a year, I panicked at the price, enough for me to eat crayfish for a year, not delicious. Decisively waive renewals…

Then there’s github’s component library, which is only a few months old.datav

As he said: open source long-term maintenance, currently support Vue, React, NPM

So components have vUE and React versions to switch between, very sweet.

SVG rendering of special effects also avoids large screen zoom distortion problems

Official rendering

It looks like there’s something there, so let’s actually do a wave.

Do it yourself

Create a React or Vue project

NPM install @jiaminghi/data-view or yarn add @jiaminghi/data-viewCopy the code

Also support the CDN

<! -- Debug version --><script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script><! -- Compressed production version --><script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.min.vue.js"></script> 
Copy the code

After installing and importing the components we need to use, we can use the components directly in the DOM

Note: It is available in React and Vue versions, so don’t forget to switch when using it

import { BorderBox1 ,BorderBox8 ,BorderBox13,Decoration1 ,ScrollBoard,ScrollRankingBoard } from '@jiaminghi/data-view-react'

 <BorderBox8>
  <div className="xpanel">
    <div className="fill-h" id="mainMap3"></div>
  </div>
 </BorderBox8>
Copy the code

It can also be used with other diagrams, and I used Echarts here

The final implementation is what the main diagram shows

Making the Demo address: https://github.com/babybrotherzb/my-datav

Practical application, upgraded version of the data large screen project

Core: Datav+G2+L7+Canvas+ hand flip

Facing the technology – : welcome you to join the https://www.mianchao.com/