1、先上效果图

2、具体的option代码

option = {
backgroundColor: '#035254',
// color:'#ff8000',
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '视频广告', '直接访问']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisLine: {
symbolSize: [12, 12],
lineStyle: {
color: "#78abff"
}
}
},
yAxis: {
type: 'value',
axisLine: {
symbolSize: [12, 12],
lineStyle: {
color: "#78abff"
}
}
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
symbol: 'circle',//折线点设置为实心点
symbolSize: 12, //折线点的大小
smooth: true,
data: [120, 132, 101, 134, 90, 230, 210],
itemStyle: {
color: '#5cfbff',
shadowColor: '#5cfbff',
shadowBlur: 20,
},
lineStyle: {
shadowColor: "#5cfbff",
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
shadowBlur: 8,
type: "solid",
width: 4
}, },
{
name: '视频广告',
type: 'line',
smooth: true,
stack: '总量',
symbol: 'circle',//折线点设置为实心点
symbolSize: 12, //折线点的大小
data: [150, 232, 201, 154, 190, 330, 410],
itemStyle: {
color: '#ecf390',
shadowColor: '#ecf390',
shadowBlur: 9.5,
},
lineStyle: {
shadowColor: "#ecf390",
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
shadowBlur: 8,
type: "solid",
width: 4,
}, },
{
name: '直接访问',
type: 'line',
stack: '总量',
smooth: true,
symbol: 'circle',//折线点设置为实心点
symbolSize: 12, //折线点的大小
data: [320, 332, 301, 334, 390, 330, 320],
itemStyle: {
color: '#bbffce',
shadowColor: '#9bfeff',
shadowBlur: 9.5,
},
lineStyle: {
width: 4,
shadowColor: "#bbffce",
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
shadowBlur: 8,
type: "solid"
},
}, ]
};

echarts折线图阴影发光效果的更多相关文章

  1. canvas多重阴影发光效果

    canvas多重阴影发光效果 前言 在一个项目中,客户提了一个发光的效果,效果图如下: 阴影 有的人可能会说,这个用阴影其实就可以实现.但是从图中可以看出,是一个比较强烈的发光效果.实际的应用过程中我 ...

  2. 实现Echarts折线图的虚实转换

    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...

  3. echarts折线图动态改变数据时的一个bug

    echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...

  4. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

  5. ECharts折线图堆叠设置为不堆叠的方法

    下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...

  6. echarts折线图,数据切换时(最近七天)绘图不合理现象

    echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...

  7. vue使用axios读取本地json文件来显示echarts折线图

    编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...

  8. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

  9. vue下使用echarts折线图及其横坐标拖拽功能

    vue页面中使用折线图,并且有时间段筛选.因此就需要用到横坐标的拖拽功能. 界面效果如下: 现在来看这个效果的实现代码: drawLine() { let that = this, lineDate ...

  10. echarts折线图--数据交互

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. Go语言中的并发操作

    并发与并行 并发:同一时间段内,执行多个任务(你在用微信和两个女朋友聊天) 并行:同一时刻,执行多个任务(你和你朋友都在用微信和女朋友聊天) Go语言中的并发通过goroutine实现.gorouti ...

  2. [CF1394D] Boboniu and Jianghu

    D - Boboniu and Jianghu 设\(dp[i][0/1]\)表示当前链从下往上是不增/减的,那么当\(u\)与\(v\)(其中\(fa[v]=u\))的\(b\)不相同时,\(dp[ ...

  3. ET5.0-添加心跳功能

    ET5.0 demo中添加心跳功能 一.服务端 1:添加文件夹,在Model/Module文件夹下新建文件夹 Hearbeat 2:添加心跳配置文件   SessionHeartbeatCompone ...

  4. SharpIcoWeb开发记录篇

    SharpIcoWeb开发记录篇 前言 大佬用.NET 9.0开发了SharpIco轻量级图标生成工具,是一款控制台应用程序,支持AOT发布,非常方便. 功能特点 ️ 将PNG图像转换为多尺寸ICO图 ...

  5. Rust 修仙之道

    静修Rust三年多,有所感悟.今借道家修仙之法展一斑之管窥,只为博大家一乐.进入正文

  6. Rust 修仙之道 第十章 链灵境 · 构筑灵链之道

    第十章:链灵境 · 构筑灵链之道 "灵链相接如脉络,错一节则断万法:唯指向明晰.层次分明者,方可汇聚长流." 顾行云接下了云隐派的一道秘术任务:重塑断裂的灵气传输通道.此通道呈现& ...

  7. jenkins部署到另一台服务器

    安装插件 搜索安装插件:publish over ssh 配置插件 系统管>SSH Servers 前端部署到另一台服务器 其实前端就是将编译后的代码传送至目标服务器的nginx的html目录下 ...

  8. cordova使用http协议打开页面(cordova结合qiankunJs)

    起因 cordova的webview默认使用file协议打开页面 qiankunJs无法(基于fetch)使用file协议加载子应用 Cookie也无法在file协议下使用 双击页面以file协议打开 ...

  9. CF1918D Blocking Elements 题解

    CF1918D Blocking Elements 如果你做过以下两道题目,那么这道题对你来说会简单得多. P1182 数列分段 Section II P2034 选择数字 由于题目要求最大值的最小值 ...

  10. java 核心编程设计模式

    简介 MVC模式 是 设计模式中的一种 模型:存储内容 视图:显示内容 控制器:处理用户输入