资讯专栏INFORMATION COLUMN

如何在新工程中添加两个不同版本的的echarts库

番茄西红柿 / 2825人阅读

摘要:标题我就觉得起的很{{BANNED}}。闲话不多说,先说出现的背景吧。然后这个机子传过来的数据就可能来条。如果用最新的来做,但是数据太小不足以画出图来,但是如果数据太大传输也是一个问题。

  emmmmm.....标题我就觉得起的很{{BANNED}}。闲话不多说,先说出现的背景吧~~。

  因为业务上的需求,跟一个硬件对接,要做大屏展示大厅客流热力图分布(背景图是客户那边给的)。然后这个机子传过来的数据就可能20来条。如果用最新的echarts4来做,但是数据太小不足以画出图来,但是如果数据太大传输也是一个问题。后来看来echarts2的热力图,仿佛找到来救星~~(https://echarts.baidu.com/echarts2/doc/example/heatmap.html)里面还有个valueScale,如果数据不好看还能放大,完美!撸起袖子就是干,但是我们大屏上已经有echart4.x 的依赖,如果通过 npm i 或者 yarn add 会直接把echarts4.x 覆盖,所以只能通过手动添加echarts2.2.8  , 

添加好后 再 install 一下就好了。

 

然后再页面里面正常使用可以了!(虽然方法有点粗暴~啊哈哈哈,mark一下)

useEffect(() => {
    require([
      echarts2, echarts2/chart/heatmap // 使用柱状图就加载bar模块,按需加载
    ], function (e) {
      e
        .init(dom)
        .setOption(option)
    })
  })

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1011.html

相关文章

  • 前端每周清单第 48 期:Slack Webpack 构建优化,CSS 命名规范与用户追踪,Vue.

    摘要:发布是由团队开源的,操作接口库,已成为事实上的浏览器操作标准。本周正式发布,为我们带来了,,支持自定义头部与脚部,支持增强,兼容原生协议等特性变化。新特性介绍日前发布了大版本更新,引入了一系列的新特性与提升,本文即是对这些变化进行深入解读。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清单专注前端...

    sean 评论0 收藏0
  • 记一次Vue项目优化及思路

    摘要:记录一个前端项目优化的路程,效果如上图。第二步优化结果再次运行查看项目打包情况可以看到项目体积已经优化到,中也看不到的踪影了。本文主要想提供一些优化思路及手段,即如何定位通过,查看页面加载时间问题,然后再解决这些问题。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 记录一个前端项目优化的路程,效果如上图。 接下来我...

    keithxiaoy 评论0 收藏0
  • 记一次Vue项目优化及思路

    摘要:记录一个前端项目优化的路程,效果如上图。第二步优化结果再次运行查看项目打包情况可以看到项目体积已经优化到,中也看不到的踪影了。本文主要想提供一些优化思路及手段,即如何定位通过,查看页面加载时间问题,然后再解决这些问题。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 记录一个前端项目优化的路程,效果如上图。 接下来我...

    nanchen2251 评论0 收藏0
  • 前端每周清单第 49 期:Webpack 4 Beta 尝鲜,React Windowing 与 s

    摘要:尽管等待了多年,但是最终还是发布了正式版本与上一个版本相比未有重大变化,主要着眼于部分错误修复与提升。能够将异步函数移入独立线程中,可以看做函数的单函数简化版。不过需要注意的是,仅支持纯函数,其会在独立的作用域中运行这些函数。 showImg(https://segmentfault.com/img/remote/1460000013038757); 前端每周清单专注前端领域内容,以对...

    muzhuyu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<