angular图表使用&Vue的图表使用

点击跳转图表官网：

---

注意事项

• 图表 dom 必须给高度，否则不显示
• 每次option(图表数据)更新以后必须要重新绘制图标，否则图表数据不会刷新
  刷新代码：

this.myChart.setOption(this.option); 

使用步骤

1. 安装依赖
2. 项目中引入echarts(angular不需要)
3. HTML中定义容器(div)，存放图表
4. js/ts中引入库文件，定义属性接受图表数据
5. 准备图表数据，加载图标

---

angular使用图表

1.安装依赖

npm install echarts --save

2.引入库文件(angular不需要，跳过此步骤)

3.HTML中定义容器(div)，存放图表

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

4.使用图表的页面ts中引入库文件，定义属性接受图表数据

import echarts from 'echarts';

myChart: any;

5.准备图表数据，加载图标

准备图表数据

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'
    }]
};

ionViewDidLoad方法中加载图表

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

---

vue使用图表

1.安装依赖

npm install echarts --save

2.引入库文件

在main.js文件中引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3.HTML中定义容器(div)，存放图表

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

4.使用图表的页面js中引入库文件，定义属性接受图表数据

import echarts from "echarts";


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

5.准备图表数据，加载图标

准备图表数据

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'
    			}]
		};
	}
}

mounted方法中加载图表

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