vue里面echarts的使用

一、先安装echarts--Handbook - Apache ECharts;

二、在min的文件中引入

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

三、在html里面增加一个div设置一个id

<template>
  <div>
    <div id="san" style="width: 20vw; height: 20vh"></div>
  </div>
</template>

四、在methods声明一个方法获取到id,然后去Examples - Apache EChart找一个你合适的模板替换掉代码里的option,在去mounted里面调一下。

tubiao() {
      var myChart = this.$echarts.init(document.getElementById("san"));
      let option ={}
       option && myChart.setOption(option);
      }
  mounted() {
    this.tubiao();
  },

 

posted @ 2022-10-22 14:38  QinHaoRan  阅读(33)  评论(0)    收藏  举报