百度echarts没有加载动画

本人QQ-554433626 2019-05-21 05:36:02
使用百度的饼图，通过ajax加载后设置option并setOption，没有加载动画。
我所说的不是加载数据的load，是饼状图直接一闪显示，没有旋转过渡动画。
该设置什么属性，还是我的js不完整，只导入了/dist/echarts.min.js 版本4.2.1
...全文
1152 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
囧 2019-05-23
  • 打赏
  • 举报
 回复
把代码贴出来看看
本人QQ-554433626 2019-05-23
  • 打赏
  • 举报
 回复
引用 1 楼 囧 的回复:
是否设置了animation属性，默认是开启动画的
未设置，并且设置animation=true也是无效
Rising-Sun 2019-05-23
  • 打赏
  • 举报
 回复
注意释放 反观楼主没注意释放这玩意 连续重绘不释放 内存泄漏太厉害
Dr立 2019-05-23
  • 打赏
  • 举报
 回复
引用 6 楼 Dr立 的回复:
对了 series里设置下面这些了吗？ 

  animationType: 'scale',
  animationEasing: 'elasticOut',
这个试了吗？
本人QQ-554433626 2019-05-23
  • 打赏
  • 举报
 回复
引用 8 楼 囧 的回复:
pancakebarChart.resize(); 把这行删了
没有用
囧 2019-05-23
  • 打赏
  • 举报
 回复
pancakebarChart.resize(); 把这行删了
本人QQ-554433626 2019-05-23
  • 打赏
  • 举报
 回复
引用 5 楼 Dr立 的回复:
[quote=引用 4 楼 本人QQ-554433626 的回复:] [quote=引用 3 楼 囧 的回复:] 把代码贴出来看看
[/quote] 我试过了，按照这么设置是可以的啊。你把速度再放慢一点试试呢？ 

animationDuration: function(idx){
        return idx*10000;
    }
[/quote] 没效果，还是直接弹出。难道是我的js问题？ js是官网下载的。\incubator-echarts-4.2.1\dist\echarts.min.js
Dr立 2019-05-23
  • 打赏
  • 举报
 回复
对了 series里设置下面这些了吗？ 

  animationType: 'scale',
  animationEasing: 'elasticOut',
Dr立 2019-05-23
  • 打赏
  • 举报
 回复
引用 4 楼 本人QQ-554433626 的回复:
[quote=引用 3 楼 囧 的回复:] 把代码贴出来看看
[/quote] 我试过了，按照这么设置是可以的啊。你把速度再放慢一点试试呢？ 

animationDuration: function(idx){
        return idx*10000;
    }
本人QQ-554433626 2019-05-23
  • 打赏
  • 举报
 回复
引用 3 楼 囧 的回复:
把代码贴出来看看
囧 2019-05-22
  • 打赏
  • 举报
 回复
是否设置了animation属性，默认是开启动画的
echarts.min.js
<html> <head> <meta charset="UTF-8"> <title>铜仁市3D地图(点击地图区域跳转到相应页面)</title> [removed][removed] [removed][removed] [removed][removed] </head> <body> <!-- 3D地图容器 -->
[removed] // 初始化图表 var myChart = echarts.init(document.getElementById('main')); // JSON文件(地图数据)路径 var uploadedDataURL = "json/522200.json"; // 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。 myChart.showLoading(); // 引入JSON文件 $.getJSON(uploadedDataURL, function(geoJson) { // 注册地图名字(tongren)和数据(geoJson) echarts.registerMap('tongren', geoJson); // 隐藏动画加载效果。 myChart.hideLoading(); // 图表配置项 var option = { title : { // 标题 top : '5%', text : '铜仁市3D地图', subtext : '', x : 'center', textStyle : { color : '#ccc' } }, tooltip : { // 提示框 trigger : 'item', formatter : function(params) { return params.name; } }, series: [{ type: 'map3D', // 系列类型 name: 'map3D', // 系列名称 map: 'tongren', // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。) // 环境贴图，支持純颜色值，渐变色，全景贴图的 url。默认为 'auto'，在配置有 light.ambientCubemap.texture 的时候会使用该纹理作为环境贴图。否则则不显示环境贴图。 environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 配置为垂直渐变的背景 offset: 0, color: '#00aaff' // 天空颜色 }, { offset: 0.7, color: '#998866' // 地面颜色 }, { offset: 1, color: '#998866' // 地面颜色 }], false), label: { // 标签的相关设置 show: true, // (地图上的城市名称)是否显示标签 [ default: false ] //distance: 50, // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离 //formatter:, // 标签内容格式器 textStyle: { // 标签的字体样式 color: '#000', // 地图初始化区域字体颜色 fontSize: 8, // 字体大小 opacity: 1, // 字体透明度 backgroundColor: 'rgba(0,23,11,0)' // 字体背景色 }, }, itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。 color: 'rgba(95,158,160,0.5)', // 地图板块的颜色 opacity: 1, // 图形的不透明度 [ default: 1 ] borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ] borderColor: '#000' // 图形描边的颜色。[ default: #333 ] }, emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式) label: { // label高亮时的配置 show: true, textStyle: { color: '#fff', // 高亮时标签颜色变为 白色 fontSize: 15, // 高亮时标签字体 变大 } }, itemStyle: { // itemStyle高亮时的配置 areaColor: '#66ffff', // 高亮时地图板块颜色改变 } }, groundPlane: { // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。 show: false, // 是否显示地面。[ default: false ] color: '#aaa' // 地面颜色。[ default: '#aaa' ] }, regions: [{ // 可对单个地图区域进行设置 name: '玉屏侗族自治县', // 所对应的地图区域的名称 //regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。 itemStyle: { // 单个区域的样式设置 color: '#00FF00', opacity: 1, borderWidth: 0.4, borderColor: '#5F9EA0' }, }, { name: '碧江区', itemStyle: { color: '#EEEE00', opacity: 1, borderWidth: 0.4, borderColor: '#5F9EA0' }, }], //shading: 'lambert', // 三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式: // 'color' 只显示颜色，不受光照等其它因素的影响。 // 'lambert' 通过经典的 lambert 着色表现光照带来的明暗。 // 'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR） 来表现真实感材质。 // realisticMaterial: {} // 真实感材质相关的配置项，在 shading 为'realistic'时有效。 // lambertMaterial: {} // lambert 材质相关的配置项，在 shading 为'lambert'时有效。 // colorMaterial: {} // color 材质相关的配置项，在 shading 为'color'时有效。 light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。 main: { // 场景主光源的设置，在 globe 组件中就是太阳光。 color: '#fff', //主光源的颜色。[ default: #fff ] intensity: 1.2, //主光源的强度。[ default: 1 ] shadow: false, //主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。 //shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ] alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ] beta: 10 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ] }, ambient: { // 全局的环境光设置。 color: '#fff', // 环境光的颜色。[ default: #fff ] intensity: 0.5 // 环境光的强度。[ default: 0.2 ] } }, viewControl: { // 用于鼠标的旋转，缩放等视角控制。 projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。 autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ] autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。 autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。 autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ] damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ] rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。 rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。 zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。 panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度 panMouseButton: 'left', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。) rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。) distance: 200, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。 minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。 maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。 alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ] beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ] minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ] maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ] minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ] maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ] center: [0,0,0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。 animation: true, // 是否开启动画。[ default: true ] animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ] animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ] }, data: [{ // 可对单个地图区域进行设置 name: '玉屏侗族自治县', // 所对应的地图区域的名称 //regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。 itemStyle: { // 单个区域的样式设置 color: '#00FF00', opacity: 1, borderWidth: 0.4, borderColor: '#5F9EA0' }, }, { name: '碧江区', itemStyle: { color: '#EEEE00', opacity: 1, borderWidth: 0.4, borderColor: '#5F9EA0' }, }] }] }; // 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。 myChart.setOption(option); }); // 处理点击事件并且跳转到相应的百度搜索页面 myChart.on('click', function (params) { var subSystem = params.name; var url = 'https://www.baidu.com/s?ie=UTF-8&wd;='; // 根据点击地图区域的名称,跳转到对应页面 if(subSystem == '德江县'){ window.open(url.concat(subSystem)); }else if(subSystem == '思南县'){ window.open(url.concat(subSystem)); }else if(subSystem == '江口县'){ window.open(url.concat(subSystem)); }else if(subSystem == '沿河土家自治县'){ window.open(url.concat(subSystem)); }else if(subSystem == '万山区'){ window.open(url.concat(subSystem)); }else if(subSystem == '碧江区'){ window.open(url.concat(subSystem)); }else if(subSystem == '石阡县'){ window.open(url.concat(subSystem)); }else if(subSystem == '玉屏侗族自治县'){ window.open(url.concat(subSystem)); }else if(subSystem == '松桃苗族自治县'){ window.open(url.concat(subSystem)); }else if(subSystem == '印江土家族苗族自治县'){ window.open(url.concat(subSystem)); } /*alert(params.name); */ }); [removed] </body> </html>
RUN名车汇翠交流平台+前端设计静态网站+高端大气+bootstrap+jQuery
给爱车人士一个交流沟通的平台，网站主要功能有： 1、汽车历史、国耀之光、品牌合集 2、车型列表、车辆类型展示、保时捷车型介绍、兰博基尼介绍、911车型介绍 3、概念车系：图文混排、动画载入、概念车详情介绍 4、创新科技：启迪未来、创新体验、创新未来、虚拟现实 5、名车俱乐部功能 6、年度评估功能：用户评价、品牌排行、用户喜好、调研品牌专区、车辆相关配置介绍 7、客户服务：预约试驾、车型选择、个人信息填写 8、我要买车：个人信息填写、百度地图引导、意向车辆信息填写 9、使用技术： Javascript + jquery实现网站交互 Bootstrap + css3 实现响应式页面展示效果，一套代码实现多端展示 echarts图表数据展示，fullpage全屏页面，swiper轮播 百度地图加载 开发工具： Photoshop：ps图片处理，切片 Vscode：辅助编辑插件，浏览器打开，本地服务器搭建，less预编译， 代码格式整理，代码快速构建
Echarts-0基础入门
0基础入门Echarts，14节课学会数据可视化： Apache ECharts 1. 课程包括Echarts基础知识：简介，快速入门，组件，样式，数据集-数据定义，数据集-数据转换，坐标轴，视觉映射，图例，事件与行为；同时也提供了实际...
H+ 后台主题UI框架v4.1 带文档 未压缩版
我从官方988元购买的，保证带文档 未压缩； 文件夹和文件结构: Hplus-v.3.0.1/ ├── css/（css文件夹，包含框架主要css及示例、插件的css文件） ├── docs/（开发文档） ├── fonts/（字体图标，包含FontAwesome字体图标和Bootstrap自带的Glyphicons字体图标） ├── img/（图片） ├── js/（js文件夹，包含框架主要的js及示例、插件的js文件） ├── plugins/（存放Flash等插件） ├── 404.html（404页面） ├── 500.html（500页面） ├── agile_board.html（任务清单） ├── article.html（文章页面） ├── badges_labels.html（徽章，标签，进度条） ├── basic_gallery.html（基本图库） ├── blog.html（文章列表） ├── blueimp.html（Blueimp相册） ├── buttons.html（按钮） ├── calendar.html（日历） ├── carousel.html（图片切换） ├── chat_view.html（聊天窗口） ├── clients.html（客户管理） ├── code_editor.html（代码编辑器） ├── contacts.html（联系人） ├── css_animation.html（css动画） ├── diff.html（文本对比） ├── draggable_panels.html（拖动面板） ├── empy_page.html（空白页面） ├── faq.html（FAQ） ├── file_manager.html（文件管理） ├── form_advanced.html（高级表单） ├── form_avatar.html（富头像上传编辑器） ├── form_basic.html（基本表单） ├── form_builder.html（表单构建器） ├── form_editors.html（富文本编辑器） ├── form_file_upload.html（文件上传） ├── form_markdown.html（Markdown编辑器） ├── form_simditor.html（Simditor富文本编辑器） ├── form_validate.html（表单验证） ├── form_webuploader.html（百度 Web Uploader） ├── form_wizard.html（表单向导） ├── forum_main.html（论坛） ├── glyphicons.html（Glyphicons图标） ├── graph_echarts.html（百度ECHarts） ├── graph_flot.html（Flot图表） ├── graph_metrics.html（图表组合） ├── graph_morris.html（Morris.js图表） ├── graph_peity.html（Peity图表） ├── graph_rickshaw.html（Rickshaw图表） ├── graph_sparkline.html（Sparkline图表） ├── grid_options.html（栅格） ├── iconfont.html（阿里巴巴矢量图标库） ├── icons.html（字体图标） ├── index.html（主页） ├── index_v1.html（主页示例一） ├── index_v2.html（主页示例二） ├── index_v3.html（主页示例三） ├── index_v4.html（主页示例四） ├── index_v5.html（主页示例五） ├── invoice.html（单据） ├── invoice_print.html（单据打印） ├── jstree.html（树形视图） ├── layer.html（web弹层组件layer） ├── layerdate.html（日期选择器layerDate）
uCharts高性能跨平台图表-其他
uCharts是一个高性能的跨平台图表库，支持H5、APP、小程序（微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、360小程序）、Vue、Taro等更多支持canvas的框架平台，支持饼图、圆环图、线图、柱状图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图。 为解决开发者使用可视化组件的困扰，uCharts官方特推出可视化通用组件，本组件具备以下特点： 1、极简单的调用方式，默认配置下只需要传入图表类型及图表数据即可全端显示。 2、提供强大的在线配置生成工具，可视化中的可视化，鼠标点一点就可以生成图表，可视化从此不再难配。 3、兼容ECharts，并解决了ECharts无法使用formatter的问题，可选择PC端或APP端单独使用ECharts引擎渲染图表。 4、H5及App采用renderjs渲染图表，动画流畅、性能翻倍。 5、根据父容器尺寸弹性显示图表，再也不必为宽高匹配及多端适配问题发愁。 6、支持加载状态loading及error展示，避免数据读取显示空白的尴尬。 7、chartData配置与数据解耦，即便使用ECharts引擎也不必担心拼接option的困扰。 8、localdata后端数据直接渲染，无需自行拼接chartData的categories及series，从后端拿回的数据简单处理即可生成图表。 9、小程序端不必担心包体积过大问题，ECharts引擎将不会编译到各小程序端，u-charts.js编译后仅为93kb。 10、未来将支持通过HbuilderX的schema2code自动生成全端全平台图表，敬请期待！！！ 11、uCharts官方拥有3个2000人的QQ群支持，庞大的用户量证明我们一直在努力，本组件将持续更新，请各位放心使用，本组件问题请在QQ3群反馈，您的宝贵建议是我们努力的动力！！ 安装注意前提条件【版本要求：HBuilderX 3.1.0+】 1、插件市场点击右侧绿色按钮【使用HBuilderX导入插件】，或者【使用HBuilderX导入示例项目】查看完整示例工程 2、依赖uniapp的vue-cli项目：请将uni-modules目录复制到src目录，即src/uni_modules。（请升级uniapp依赖为最新版本） 3、页面中直接按下面用法直接调用即可，无需在页面中注册组件qiun-data-charts 4、注意父元\u7d20class='charts-box'这个样式需要有宽高
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章