- 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.