Vue2 Methods and Steps to Add Data Visualization Support

Install

npm install clay-core --save

First, install the data visualization library through npm. For specific APIs, you can check the documentation:

/clay-core/doc/#/quickstart/environment

This is a non-embedded library.

initialization

Create a new file src//

import render from 'clay-core';
import Sizzle from 'sizzle';

let clay = render(window);
("$sizzleProvider", () => (selector, context) => Sizzle(selector, context));

export default clay;

Before starting, there can be multiple configurations to adjust or strengthen the specific development environment. We have enhanced the selector function above, so you may also need to install sizzle:

npm install --save sizzle

use

Now, you can use this library in comparison with the API, for example:

For example, modify the method:

1. First import at the beginning:

import clay from './';

2. Use where needed:

el: clay('#root')[0],

Usage Components

First, we copy a component from the component library, and the component repository address:

/yelloxing/clay-component

Copy to a folder because the components are developed based on browser, not module development, so you need to add them to component development:

import clay from "./";

Then, use it:

clay("svg")
 .attr("width", 800)
 .attr("height", 700)

 //Use components .use("circleTree", {
  // data  data: ,

  // Node name  name: orgItem => ,

  // The center and radius of the tree  cx: 350,
  cy: 350,
  r: 300,

  // Tree structure configuration  root: initTree => initTree,
  child: parentTree => ,
  id: treedata =>
    + ( ? "_" +  : "")
 });

The final project file Github address:/yelloxing//tree/V5

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.