Angular chart usage & Vue chart usage

Click on the official website of the Jump Chart :

---

Precautions

• The chart dom must give the height, otherwise it will not be displayed
• The icon must be redrawn after every option (chart data) is updated, otherwise the chart data will not be refreshed.
  Refresh code:

this.myChart.setOption(this.option); 

Steps for usage

1. Installation dependencies
2. Introduce echarts into the project (not needed for angular)
3. Define the container (div) in HTML to store the chart
4. Introduce library files in js/ts, define attributes to accept chart data
5. Prepare chart data, load icon

---

angular usage chart

1. Installation dependencies

npm install echarts --save

2. Import library files (no need for angular, skip this step)

3. Define the container (div) in HTML to store the chart

<div id="pie"></div>

4. Use the chart page ts to introduce library files, define attributes to accept chart data

import echarts from 'echarts';

myChart: any;

5. Prepare chart data and load icons

Prepare chart data

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

Load the chart in the ionViewDidLoad method

ionViewDidLoad() {
	// 基于准备好的dom，初始化echarts实例
	this.myChart = echarts.init(document.getElementById('pie'));
	// 绘制图表
	this.myChart.setOption(this.option); 
}

---

vue usage chart

1. Installation dependencies

npm install echarts --save

2. Import library files

Introduced in the main.js file

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3. Define the container (div) in HTML to store the chart

<div id="pie"></div>

4. Use the chart page js to introduce library files, define attributes to accept chart data

import echarts from "echarts";


data() {
	return {
		myChart: {},	
	}
}

5. Prepare chart data and load icons

Prepare chart data

data() {
	return {
		myChart: {},
		option: {
			xAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
    			yAxis: {
        			type: 'value'
    			},
    			series: [{
        			data: [820, 932, 901, 934, 1290, 1330, 1320],
        			type: 'line'
    			}]
		};
	}
}

Load the chart in the mounted method

	// 基于准备好的dom，初始化echarts实例
	this.myChart = echarts.init(document.getElementById("pie"));
 	// 绘制图表
 	this.myChart.setOption(this.option);