• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Some time ago, I used Echarts to do a front-end data visualization project to make simple notes

How to use Echarts

1. Download and import the echarts.js file

2. Prepare a DOM container with the size

3. Initialize the Echarts instance object

Var myChart = echarts.init(document.querySelector("DOM "));Copy the code

4. Specify configuration and data (option)

5. Set the configuration item to the Echarts instance object

myChart.setOption(option);
Copy the code

6. The adaptive

window.addEventListener('resize', function () {
        myChart.resize();
    })
Copy the code

Specify tips in configuration and data

1. Title: title component

2. Legend: The legend component can be used to set the position of the legend through top, left, etc. ItemWidth /Height can be used to set the Height of the graph marked in the graph

3. Grid: Drawing grid in rectangular coordinate system. In a single grid, up and down X axes and left and right Y axes can be placed at most. You can draw line charts, bar charts, scatter charts (bubble charts) on the grid.

String template :{a},{b},{c},{d},{e}

5. The x axis of the grid,lineStyle. Color:

// Linear gradient, the first four parameters are x0, y0, x2, y2, ranging from 0 to 1, which is the percentage in the graph box. If globalCoord is' true ', the four values are absolute pixel positions. X: 0, y: 0, x2: 0, y2: 1, colorStops: [{offset: 0, color: 'red' // 0% of the color}, {offset: 1, color: 'red' // 0% of the color}, {offset: 1, color: 'blue' // color at 100%}], global: false // Default false}Copy the code

XAxis. AxisTick Scale Settings

Xaxy. axisLine: Axis related Settings

Xaxy. axisLabel: Settings for the axis scale label

Xaxis.splitline: The dividing line of coordinate axes in the grid area.