1. 下载 echarts 的包
npm install echarts --save
2. 引入 并使用
(1) 在 main.js 文件中引入(全局注册)
// 引用 echarts
import * as echarts from 'echarts';
// 全局方法挂载
Vue.prototype.$echarts = echarts;
(2)哪里用哪里引入(局部引用)
// 引用 echarts
import echarts from 'echarts';
3. 在 index.vue 文件中使用
<template>
<!-- 盒子必须要有宽高 -->
<div class="box" id="main"></div>
</template>
<script>
import echarts from 'echarts';
export default {
data(){
return {
}
},
// 在 mounted 中写
// 一般在初始化页面完成后,再对dom节点进行相关操作
mounted(){
this.pieChart
},
methods:{
pieChart(){
// 基于准备好的DOM,初始化echarts实例
let myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据(视图内容)
let option = {
// 这里面的内容就是 echarts 的图表的数据和配置项
}
// 使用刚指定好的配置项和数据显示图表
option && myChart.setOption(option);
}
}
}
</script>
<style scoped>
.box{
width:100%;
height:100%;
}
</style>