echarts 加载动画重绘\自适应\toolbox中magicType的方法

原创已于 2023-07-04 16:56:46 修改 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #动画 #javascript

于 2021-12-23 22:16:48 首次发布

本文介绍了ECharts的一些实用技巧，包括如何实现加载动画重绘、图表的自适应调整以及使用toolbox中的magicType方法来切换图表类型，并提供了具体的代码示例。

文章目录

前言
一、加载动画重绘
二、自适应
三、toolbox中magicType的方法

前言

最近用了好多echarts，总结一下一些小功能，方便日后查看

一、加载动画重绘

代码如下：

this.ss = setInterval(()=>{
      
      var option1 = this.myChart.getOption();
      this.myChart.clear();  // 清空画布
      this.myChart.setOption(option1); // 重新绘制
    },3000)

二、自适应

代码如下：

// 这是浏览器窗口变化监听
window.addEventListener("resize", () => {
                            noiseLine.resize();
                        });
// 这是侧边栏变化监听。vue3，加setTimeout是因为侧边栏变化需要时间
watch(() => store.state.isCollapse, (newV, oldV) => {
        setTimeout(() => {
            lineChart.resize()
            barChart.resize()
            pieChart.resize()
        }, 30)

    })

三、toolbox中magicType的方法

在这里插入图片描述
第一个折线图、第二个柱状图、第三个刷新、第四个下载（下载是下载成图片，如果是别的文件的话，是要自己做下载的图标，然后绝对定位写入，再给他点击事件）
代码如下：

// 下载鼠标悬浮的样式
.xia-zai-tooltip.el-tooltip__popper.is-light {
  border:none;
  background-color: transparent;
  color:#29C984;
  padding: 0;
  margin-top: 7px;
  width: 25px;
}
// v-if="flag"这是因为如果图表没加载出来，单独写的下载按钮会出来，这是写在图表完成之后设为true，或者是数据拿到之后也可以，数据小选择的快
<el-tooltip
          v-if="flag"
          class="item"
          effect="light"
          content="下载"
          placement="bottom"
          :visible-arrow='false'
          popper-class='xia-zai-tooltip'
        >
          <div class="iconfont iconfont-xiazai xia-zai" @click.stop="onExport"></div>
        </el-tooltip>
// 渲染完成之后的方法
noiseLine.on('finished', function () {
    this.flag = true
});

// 点击折线图、或者柱状图都要能下载，所以下载的参数不一样
noiseLine.on('magictypechanged', (params) => {
                            if (params.currentType == 'line') {
                                this.chartType = '2'
                            } else if (params.currentType == 'bar') {
                                this.chartType = '1'
                            }
                        })