今天我要给 echarts 组件加个 dataZoom 功能,结果发现没有效果。

后来发现是引入 echarts 模块的问题。

如果是按需引入的话,必须引入相应的功能模块才能使用相应的功能。

举例:

import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'

我没有引入 dataZoom ,所以不能使用。

import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/dataZoom'

这样就可以了。

echarts 踩坑 : 为什么效果出不来?看看有没有正确引入的更多相关文章

  1. echarts踩坑---容器高度自适应

    在echarts中,若设置固定高度,当柱状图数据过多时会出现数据相互挤压,给用户的体验十分糟糕,可以通过给容器设置自适应高度,然后通过getDom()的方法解决此问题. 具体解决办法如下: <d ...

  2. echarts 踩坑 : id必须不同

    我们可能用react前端框架开发项目. 也就是组件化开发. 一个页面里可能有很多组件. 而echarts是寻找特定ID的DOM去渲染的. 也就是说,如果整个页面.包括所有页面组件,有id相同的DOM, ...

  3. echarts踩坑总结

    1,有关echarts引用的相关报错直接写这句  import * as echarts from 'echarts' 2,折线图 chartsObj = { tooltip: { trigger: ...

  4. echarts 踩坑 : 为什么触摸柱状图的时后柱子不见了?原来是color的锅!

    今天发现一个奇怪的问题. 当我的鼠标触摸柱状图的时候,柱状图就消失了. 后来发现是颜色的设置有问题. color: ['rgba(68,238,224)', 'rgba(17,215,255)', ' ...

  5. ant.design React使用Echarts,实力踩坑

    最近项目用到Echarts(以下用ec代替),于是照猫画虎得引入到团队的antd项目中,但是遇到2个棘手问题: 1. ec对dom不渲染,检查后发现,原来是全局存在id重复,所以使用React时,最好 ...

  6. vue父组件异步传递prop到子组件echarts画图问题踩坑总结

    效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...

  7. 微信小程序之mpvue+iview踩坑之旅

    因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅. 参照mpvue http://mp ...

  8. JavaScript 踩坑心得— 为了高速(下)

    一.前言 本文的上一篇 JavaScript 踩坑心得- 为了高速(上) 主要和大家分享的是 JavaScript 使用过程中的基本原则以及编写过程中的心得分享,本文主要和大家聊聊在各个使用场景下的 ...

  9. Spark踩坑记——从RDD看集群调度

    [TOC] 前言 在Spark的使用中,性能的调优配置过程中,查阅了很多资料,之前自己总结过两篇小博文Spark踩坑记--初试和Spark踩坑记--数据库(Hbase+Mysql),第一篇概况的归纳了 ...

随机推荐

  1. springboot 配置本地文件映射路径

    @Configuration public class MyBlogWebMvcConfigurer extends WebMvcConfigurerAdapter { @Autowired priv ...

  2. 提交代码到gitbub.com

    提交代码到gitbub.com touch README.md //新建说明文件 git init //在当前项目目录中生成本地git管理,并建立一个隐藏.git目录 git add . //添加当前 ...

  3. Redis Wendows安装步骤

    1.打开cmd命令提示符2.打开cmd如下图,输入Redis下载磁盘名称+“:” ,然后回车 3.如下图:输入"cd" 然后空格,后面是Redis的路径   回车 4.设置服务命令 ...

  4. 想学好Python,你必须了解Python中的35个关键词

    每种编程语言都会有一些特殊的单词,称为关键词.对待关键词的基本要求是,你在命名的时候要避免与之重复.本文将介绍一下Python中的关键词.关键词不是内置函数或者内置对象类型,虽然在命名的时候同样也最好 ...

  5. 505. The Maze II

    原题链接:https://leetcode.com/articles/the-maze-ii/ 我的思路 在做完了第一道迷宫问题 http://www.cnblogs.com/optor/p/8533 ...

  6. 尚学堂 213_尚学堂_高淇_java300集最全视频教程_反射机制_提高反射效率_操作泛型_操作注解_合并文件.mp4

    在反射的时候如果去掉了安全性检测机制,能够大大的提高反射的执行效率,我们来看下面的代码进行比较 package com.bjsxt.test; import java.lang.reflect.Met ...

  7. Java 将PDF/XPS转为Word/html /SVG/PS/PCL/PNG、PDF和XPS互转(基于Spire.Cloud.SDK for Java)

    Spire.Cloud.SDK for Java提供了接口PdfConvertApi通过convert()方法将PDF文档以及XPS文档转为指定文档格式,如转PDF为Word(支持Docx.Doc). ...

  8. 入门大数据---Kafka的搭建与应用

    前言 上一章介绍了Kafka是什么,这章就讲讲怎么搭建以及如何使用. 快速开始 Step 1:Download the code Download the 2.4.1 release and un-t ...

  9. AJAX 调用WebService 、WebApi 增删改查(笔记)

    经过大半天努力,终于完成增删改查了!心情有点小激动!!对于初学者的我来说,一路上都是迷茫,坑!!虽说网上有资料,可动手起来却不易(初学者的我).(苦逼啊!) WebService 页面: /// &l ...

  10. .net Core中如何读取Appsetting配置文件

    现在APPSetting下面配置以下节点 { "Logging": { "IncludeScopes": false, "LogLevel" ...