1.在vue中添加Echarts图表使用详解
使用npm添加package.json文件中的配置并下载相关npm包依赖
npm install echarts --save
然后在需要创建图表的组件中引入
// 引入echarts
import echarts from "echarts"
在模板中创建所需的dom
<div class="echarts-wrap">
<div class="item1-l" ref="myChart"></div>
<div class="item1-r" ref="myPie"></div>
</div>
写入js
<script>
export default {
name: "Index",
data() {
return {
myChart: null, //关键一
myPie: null,
}
},
mounted() {
this.drawLine();
this.drawPie();
this.init(); //让echarts窗口自适应 //关键二
},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
this.myChart = echart