vue + echarts

vue + echarts

1. vue项目中安装echarts

vue3：echarts官方提供了一个兼容的库echarts-for-vue，安装命令行如下：

npm install echarts-for-vue --save
# 或者
yarn add echarts-for-vue

vue2：可以使用vue-echarts，安装命令行如下：

npm install vue-echarts --save
# 或者
yarn add vue-echarts

2. 引入echarts

在需要使用echarts的组件中引入echarts：

import * as echarts from "echarts";

3. 创建一个盒子来承载echarts实例

<template>
	<div>
		<div id="chart"></div>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	export default {
	  name: 'MyChart',
	};
</script>

<style>
	#charts {
		height: 200px;
		width: 200px;
	}
</style>

注意：一定要定义盒子的宽和高！！！

4. 创建echarts实例并编辑配置项

initChart(){
	let chartDom = document.getElementById('chart'); // 括号里的字符串一定要与盒子id一致
    let myChart = echarts.init(chartDom);
    let option;

    option = {};

    option && myChart.setOption(option);
}

options配置项详见官网配置手册：https://echarts.apache.org/zh/option.html#title
以上创建实例的函数需要在合适的地方执行。例如：

mounted(){
	this.initChart();
}