Echarts 折线图最后一个点发光闪烁效果

效果如下：

实现方式：

   // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//数据加载完之前先显示一段简单的loading动画
//myChart.showLoading();
var names = []; //横坐标数组（实际用来盛放X轴坐标值）
var values = []; //纵坐标数组（实际用来盛放Y坐标值）
var effectValues = []; //闪烁效果$.ajax({type : "post",async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）url : "show", //请求发送到dataActiont处data : {},dataType : "json", //返回数据形式为jsonsuccess : function(result) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (result) {for (var i = 0; i < result.length; i++) {names.push(result[i].name);values.push(result[i].num);}effectValues = values.slice(0);let e = {value : effectValues.pop(),symbolSize : 30}effectValues.push(e);myChart.hideLoading(); //隐藏加载动画//debugger;var series = [ {name : '总量',type : 'line',label : {normal : {show : true,position : 'top'}},data : values} ];var myOption = { //加载数据图表tooltip : {},toolbox : {show : true,feature : {mark : {show : true},dataView : {show : true,readOnly : false},magicType : {show : true,type : ['line','bar','stack','tiled' ]},restore : {show : true},saveAsImage : {show : true}}},calculable : true,legend : {data : [ '數量' ]},xAxis : {data : names},yAxis : {type : 'value'},series : series};var effectScatter = {name : "数据名称",type : 'effectScatter',coordinateSystem : 'cartesian2d',//2d坐标系data : effectValues,symbolOffset : [ 0, -30 ],symbolSize : 0,large : true,symbol : 'circle', //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'legendHoverLink : true, //是否启用图例 hover 时的联动高亮。hoverAnimation : true, //是否开启鼠标 hover 的提示动画效果。effectType : 'ripple', //特效类型，目前只支持涟漪特效'ripple'。showEffectOn : 'render', //配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。cursor : 'pointer',rippleEffect : { //涟漪特效相关配置。period : 1.5, //动画的时间。scale : 6, //动画中波纹的最大缩放比例。brushType : 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'。},hoverAnimation : true,itemStyle : {normal : {color : 'red',shadowBlur : 10,shadowColor : '#333'}},zlevel : 1};myOption.series.push(effectScatter);myChart.setOption(myOption);}},error : function(errorMsg) {//请求失败时执行该函数alert("图表请求数据失败!");myChart.hideLoading();}
});//end ajax

后端数据返回：

@RequestMapping("show")@ResponseBodypublic String show(Model model) {List<EcharsData> list = new ArrayList<EcharsData>();list.add(new EcharsData("帽子", 50));list.add(new EcharsData("鞋子", 126));list.add(new EcharsData("毛衣", 75));list.add(new EcharsData("羽绒服", 201));list.add(new EcharsData("羊毛衫", 172));return JSON.toJSONString(list);}

Echarts 折线图最后一个点发光闪烁效果相关推荐

echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
d3.js 教程模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
Echarts折线图的平移假动画
Echarts折线图的平移假动画 #可视化项目中经常用图表的方式来展示数据,折线图是经常出现的,但是在echarts折线图中正常情况是通过删除数据的第一个,添加一个新数据在数组的末尾来实现动画,此动画 ...
echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
echarts 折线图折线从头开始
在echarts折线图中,默认折线从刻度中心开始,我们为了图标的美观有时需要折线从头开始显示,一个配置项就可以轻松搞定. boundaryGap:false
echarts折线图动态多条线
echarts折线图配置项由于工作中遇到的图表特别多,每次用过配置项总是想不起来,在这里记录一下,希望也可以帮到路过的你.话不多说我们上图: 左边的是设计稿,右边的是echarts的示例图,我们先找 ...
echarts折线图堆叠怎么设置_ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
echarts折线图各段设置不同颜色
echarts折线图各段设置不同颜色可以通过设置 visualMap 属性,来控制不同线段的颜色: 文档连接: https://echarts.apache.org/zh/option.html#v ...
echarts折线图实线与虚线拼接及提示框浮层内容格式的设置
echarts折线图实线与虚线拼接及提示框浮层内容格式的设置想要实现实线与虚线的结合,后端返回的数据是动态的,根据状态的不同展示实线与虚线. 例子1: 数据是固定的 series: [{name:' ...
echarts折线图横轴标签间隔
Echarts折线图展示时,如果横轴是按分钟展示数据,并且要一次展示一小时数据,那么横轴上会有60个标签,这样会导致数据会重叠在一起,展示效果不理想,此时可以横轴标签的间隔,比如每5分钟展示一个横轴标 ...

Echarts 折线图最后一个点发光闪烁效果

效果如下：

Echarts 折线图最后一个点发光闪烁效果相关推荐

最新文章

热门文章