vue+echarts的用法

最近开发后台管理时用到了echarts这个组件，在使用过程中也遇到坑。

我们首先需要将写一个具备高宽的 DOM 容器。

       <div  style="width: 100%;height: 400px;">
         <div id="category" style="width: 100%;height: 100%"></div>
       </div>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是在请求数据时，如何去调用echarts的配置option。

methods:{
       chart(){
         this.drawColumnChart('', '')
       },
       
   drawColumnChart(legend,currDate,series) {
     this.charts= echarts.init(document.getElementById("charts"));
     let option = {
       tooltip: {
         trigger: "axis"
       },
       legend: {
         data: legend
       },
       grid: {
         left: "3%",
         right: "4%",
         bottom: "3%",
         containLabel: true
       },
       xAxis: {
         type: "category",
         boundaryGap: false,
         data: currDate
       },
       yAxis: [
         {
           type: 'value'
         }
       ],
       series: series
     };
     this.category.setOption(option,true);
     //视图自适应
     window.addEventListener("resize", () => { this.category.resize();});
   }
     },

在mounted钩子中调用这个chart函数，要在组件加载完成后调用，不然刷新整个页面后，视图就不显示了。

      mounted () {
        this.chart();
      },

注意：请求数据后，接口请求成功，但视图并没有发生改变，在setOption加一个true就可以解决： this.category.setOption(option,true);

猜你喜欢