echarts

安装

bash

npm install echarts --save

引入

路径：src/main.js

javascript

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts;

使用

架构模板

需要先声明一个 ref，通过 refs 去绑定 dom
需要给定宽高（可以是100%），否则不显示
option 还可以写在 data 中，数据渲染时，引用即可 -> this.option

html

<template>
    <div ref="myEchart" style="width: 100%; height: 100%;"></div>
</template>

<script>
// 使用写法二时，需要写入此句
import * as echarts from "echarts";    
export default {
	data() {
		return {
			
		};
	},
	mounted() {
		this.initEcharts();
	},
	methods: {
		initEcharts() {
            // 配置参数
			const option = {};
            // 初始化 (写法一)
			const myEchart = this.$echarts.init(this.$refs.myEchart);
            // 写法二
            const myChart = echarts.init(this.$refs.mychart);
            // 数据渲染
			myEchart.setOption(option);
		}
	}
};
</script>

TIP

注意写法一和写法二的区别，多了一个 this.$xxx，如果没有 $，则需要引入这句话 import * as echarts from "echarts";

echarts ​

安装 ​

引入 ​

使用 ​

架构模板 ​

echarts

安装

引入

使用

架构模板