vue+echarts的用法

柔光的暖阳◎ 2021-10-19 05:46 310阅读 0赞

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

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

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

1.  然后就可以通过 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);

发表评论取消回复

表情：

评论列表（有 0 条评论，310人围观）

还没有评论，来说两句吧...

相关阅读

相关 typedef的用法

基本概念 typedef与结构体 typedef与数组 \------------------------------------- typedef是c语言中的关键字，

阳光穿透心脏的1/2处/ 2022年08月18日 10:59/ 0 赞/ 320 阅读

相关 Merge的用法

Merge的用法【[尊重][Link 1] [原创，转载请注明出处][Link 1] 】http://blog.chinaunix.net/uid-206498

短命女/ 2022年07月28日 09:49/ 0 赞/ 377 阅读

相关 BaseAdapter的用法

转自：[http://www.360doc.com/content/16/0712/00/35027416\_574846151.shtml][http_www.360doc.

朴灿烈づ我的快乐病毒、/ 2022年07月21日 01:17/ 0 赞/ 450 阅读

相关 typedef 的用法

此部分参考自：http://blog.sina.com.cn/u/572f7666010008dm 用途一：定义一种类型的别名，而不只是简单的宏替

骑猪看日落/ 2022年07月17日 04:39/ 0 赞/ 289 阅读

相关 typedef的用法

typedef主要有四个通途，如下：用途一：定义一种类型的别名，而不只是简单的宏替换。可以用作同时声明指针型的多个对象。比如： char pa, pb

「爱情、让人受尽委屈。」/ 2022年06月04日 01:57/ 0 赞/ 344 阅读

相关 Distinct的用法

一、使用Distinct （1）单列去重 select distinct dname from blog （2）多列去重 selec

爱被打了一巴掌/ 2022年05月19日 04:45/ 0 赞/ 386 阅读

相关 typedef 的用法

typedef 的用法 \\\\\以下是参考部分\\\\\ 此部分参考自：http://blog.sina.com.cn/u/572f7666010008dm 用途一：

我不是女神ヾ/ 2022年04月10日 07:53/ 0 赞/ 333 阅读

相关 typedef的用法

类型定义 - typedef 1, 给某个类型指定别名 2, 如, typedef int INTEGER; int num; <==> INTEGER num

ゞ浴缸里的玫瑰/ 2021年12月14日 03:47/ 0 赞/ 474 阅读

相关 D3Vueecharts个人乱记

利用d3+vue开发的一个网络拓扑图 [https://copyfuture.com/blogs-details/20200710101052238h32wazjmci

喜欢ヅ旅行/ 2021年09月07日 06:22/ 0 赞/ 405 阅读

相关 ${ }的用法

假設我們定義了一個變量為： file=/dir1/dir2/dir3/my.file.txt 我們可以用 ${ } 分別替換獲得不同的值： ${file#*/}：拿掉第一...

朱雀/ 2021年04月23日 15:08/ 0 赞/ 935 阅读