- Download echarts, import echarts file
npm i echarts
-----------
import echarts from "echarts";
-
Place a box with width and height on the page, and place echarts.
【Notice】:The box where echarts is placed must have width and height, otherwise the chart is not displayed.
-
Start instantiating the graph.
【Notice】:Be sure to clear before instantiating the graph, otherwise after multiple requests, the data will stack and the page will freeze. -
After instantiating the chart is the normal chart configuration. Common configuration items
-
Points to note when getting data from the background to render the chart
①Instantiate the timing of calling the initchartDealLine() function of the chart:After getting the chart data
② Clear the chart data in the beforeDestroy function
-
Page rendering chart optimization points
①v-loading: After getting the chart data, close it, so that once you enter the page, it will show that the chart is always loading.
②If there is no chart data, it will display a picture without data instead. el-empty empty state
