<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="static/jquery.js"></script>
<script src="static/echarts4.js"></script>
</head>
<script>
$(function() {
var x = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
var series = [{
name: '总量',
type: 'line',
label: {
normal: {
show: true,
position: 'top'
}
},
data: [0, 50, 100, 150, 200, 150, 100]
}]
var option = {
xAxis: [{
type: 'category',
boundaryGap: false,
data: x
}],
yAxis: [{
type: 'value'
}],
series: series
};
var effectScatterData = [0, 50, 100, 150, 200, {value:150,symbolSize:30,}, 100]
var effectScatter = {
type: 'effectScatter',
coordinateSystem: 'cartesian2d',
data: effectScatterData, //2d坐标系
symbolSize:0,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: 'red',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
};
option.series.push(effectScatter);
myChart = echarts.init(document.getElementById('fleshChart'));
myChart.setOption(option)
})
</script> <body>
<div id="fleshChart" style="width:100%;height:500px;">
</div>
</body> </html>

echarts4.0折线图让某个点闪烁的更多相关文章

  1. [vue折线图] 记录SpringBoot+Vue3.0折线图订单信息展示

    因公司业务需求,需要做一份订单相关的折线图, 如果其中有一天没有订单的话,这一天就是空缺的,在绘制折线图的时候是不允许的,所有要求把没有订单数据的日期也要在图表显示. 使用技术vue3.0+sprin ...

  2. jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码

    js代码: <script type="text/javascript"> $(function(){ showLine(); showColumn(); showPi ...

  3. HighCharts实现多数据折线图分列显示

    HighCharts实现多数据折线图分列显示 BY ZYZ HighCharts是一个很好用的web端绘图插件,用起来很方便,它的官方支持很好.并且有中文API(不全然).画出来的图像也挺美丽的. 近 ...

  4. OpenGL(十七) 绘制折线图、柱状图、饼图

    一.绘制折线图 glutBitmapCharacter(GLUT_BITMAP_8_BY_13,label[j])函数可以绘制GLUT位图字符,第一个参数是GLUT中指定的特定字形集,第二个参数是要写 ...

  5. MPAndroidChart 3.0——LineChart(折线图)

    显示效果 MPAndroidChart每一种图表的基本使用方式都基本相同 了解一种图表的实现 参考项目源码其他的图表也就差不多哩 在布局文件中定义 <com.github.mikephil.ch ...

  6. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  7. echarts、higncharts折线图或柱状图显示数据为0的点

    echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...

  8. vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图,折线图)

    一.echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使 ...

  9. 基于SpringMVC框架使用ECharts3.0实现折线图,柱状图,饼状图,的绘制(上篇)

    页面部分 <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html> ...

随机推荐

  1. MySQL之InnoDB数据页结构(转自掘金小册 MySQL是怎样运行的,版权归作者所有!)

    InnoDB为了不同的目的而设计了不同类型的页,我们把用于存放记录的页叫做数据页. 一个数据页可以被大致划分为7个部分,分别是 File Header,表示页的一些通用信息,占固定的38字节. Pag ...

  2. python之路6-迭代器、生成器、装饰器

    1.迭代器&生成器 列表生成式 现在有个需求,列表[1,2,3,4,5,6,7,,8,9],要求把列表里的每个值加1,如何实现? 方法一: list = [1,2,3,4,5,6,7,8,9] ...

  3. oracle创建表空间等相关语句

    在数据库可视化工具中执行以下语句,可建立Oracle表空间. 主要分为四步 1.创建临时表空间 create temporary tablespace xuanwu_temp tempfile 'D: ...

  4. form表单中新增button按钮,点击按钮表单会进行提交

    原生button控件,在非ie浏览器下,如果不指定type,默认为submit类型.如果不想自动提交表单,指定type=“button”

  5. WebViewClient 与 WebChromeClient

    WebViewClient帮助WebView处理各种通知和请求事件的,我们可以称他为WebView的“内政大臣”.常用的shouldOverrideUrlLoading就是该类的一个方法,比如: on ...

  6. 使用css实现无滚动条滚动+使用插件自定义滚动条样式

    使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...

  7. Linux安装Tomcat8

    前置条件 安装jdk,见参考文章 下载Tomcat8 先从tomcat网站上下载最新的.gz安装包 tomcat官网下载地址 在下面找到Linux对应的tomcat安装包 我下载的文件名是:apach ...

  8. 【Linux网络编程】TCP网络编程中connect()、listen()和accept()三者之间的关系

    [Linux网络编程]TCP网络编程中connect().listen()和accept()三者之间的关系 基于 TCP 的网络编程开发分为服务器端和客户端两部分,常见的核心步骤和流程如下: conn ...

  9. Spark Standalone spark-default.conf

    Example: spark.master spark://master:7077 spark.eventLog.enabled true spark.eventLog.dir hdfs://name ...

  10. C# this扩展方法

    本文导读:扩展方法被定义为静态方法,但它们是通过实例方法语法进行调用的. 它们的第一个参数指定该方法作用于哪个类型,并且该参数以 this 修饰符为前缀. 扩展方法当然不能破坏面向对象封装的概念,所以 ...