echarts折线图上下颜色渐变样式
// 折线图
let lineChart = echarts.init(document.getElementById('lineChart'));
let lineOption = {
title: {
text: '数据接入增量趋势',
textStyle: {
color: '#cccccc',
fontSize: 14
}
},
tooltip : { // 悬浮提示
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
left: 5,
right: 20,
top: 50,
bottom: 5,
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false, // 是否紧贴y轴
axisLine: { // x轴
lineStyle: {
color: '#606970'
}
},
axisTick: { // x轴刻度
lineStyle: {
color: '#606970'
}
},
axisLabel: { // x轴文字
color: '#ffffff',
fontSize: 10
},
data : ['4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日']
}
],
yAxis : [
{
name: '单位:万条',
type: 'value',
nameTextStyle: {
color: '#ffffff',
fontSize: 10,
padding: [0, 0, 0, 0]
},
axisLine: { // y轴
show: false
},
axisTick: { // y轴刻度
show: false
},
axisLabel: { // y轴文字
color: '#ffffff',
fontSize: 10
},
splitLine: { // y轴分割线
lineStyle: {
color: '#606970'
}
},
splitNumber: 5, // 总分隔线条数
interval: 25 // 强制分隔单位
}
],
series : [
{
name:'数据接入增量',
type:'line',
stack: '总量',
itemStyle: {
color: '#5dd9da'
},
lineStyle: {
color: '#5dd9da',
width: 0.5
},
areaStyle: { // 颜色自上而下渐变
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 1代表上面
offset: 0,
color: '#3399fb'
}, {
offset: 1,
color: '#3399cd'
}]),
opacity: 1 // 填充区域透明度
},
data:[0, 25, 50, 75, 100, 0, 25, 50, 75, 100, 0, 25]
}
]
};
lineChart.setOption(lineOption);
echarts折线图上下颜色渐变样式的更多相关文章
- echarts关系图圆心颜色渐变
let option = { backgroundColor: '#1a4377', animationDurationUpdate: 1500, // 动画更新变化时间 animationEasin ...
- echarts折线图相关
optionJKDLine = { title: { text: '告警数量趋势图', textStyle:{ //标题样式 fontStyle:'normal', fontFamily:'sans- ...
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- echarts折线图动态改变数据时的一个bug
echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- echarts折线图,数据切换时(最近七天)绘图不合理现象
echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...
- vue使用axios读取本地json文件来显示echarts折线图
编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...
- echarts更改折线图区域颜色、折线颜色、折点颜色
series : [ { name:'订单流入总数', type:'line', stack: '总量', areaStyle: { normal: { color: '#8cd5c2' //改变区域 ...
随机推荐
- 登陆远程服务器的Tomcat 8的manger的页面403
访问远程服务器Tomcat 8的管理页面报错 在远程服务器上安装了一个tomcat8.5,配置好用户后重新启动tomcat ,发现:8080可以访问,但是进入:8080/manager/html页面报 ...
- 关于MySQL的一些骚操作——提升正确性,抠点性能
概要 回顾以前写的项目,发现在规范的时候,还是可以做点骚操作的. 假使以后还有新的项目用到了MySQL,那么肯定是要实践一番的. 为了准备,创建测试数据表(建表语句中默认使用utf8mb4以及utf8 ...
- python生产者和消费者模式实现(三)进程池方式
注意:如果要使用Pool(进程池方式)创建进程,就需要使用multiprocessing.Manager()中的 Queue(),而不是multiprocessing.Queue() import t ...
- springboot整合spring Data JPA
今天敲代码,一连串的错误,我也是服气~果然,我们不是在出bug,就是在找bug的路上…… 今天完成的是springboot整合spring data JPA ,出了一连串的错,真是头大 java.sq ...
- [Go] 分页计算页码的主要逻辑
当使用imap进行读取邮件体的时候,有个函数可以根据传入的开始和结束索引来一次读取多条邮件内容主要逻辑类似这样,从1开始, 1,10 11,20 21,30 或者 1,31 32,63 ...
- mysql简单的sql操作语句
一,常用.简单的SQL操作语句 1.数据库操作: 1)创建数据库: create database database_name: 创建并设置字符编码 create database database_ ...
- 软件工程基础团队第二次作业(团队项目-需求分析&系统设计)成绩汇总
一.作业题目 团队第二次作业:需求分析&系统设计 二.具体要求 1.作业任务 任务一:组长组织项目组开展需求调研工作(可采取需求调查.问卷.分析已有软件.网上资料等方法).概要设计.详细设计. ...
- python获取某路径下,某种特定类型的文件名称,os.walk(路径)生成器;os.listdir(路径),os.path.splitext(名称),os.path.join(路径,名称),os.path.isdir(路径\名称)
#获取某文件夹下制定类型文件# import os# def filep(fp):# l=[]# a=os.walk(fp) #生成器# for nowp,sonp,oth in a: #当前目录,子 ...
- jQuery中的事件(七)
1. ready(fn), 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数 这个方法纯粹是对向window.load事件注册事件的替代方法.通过使用这个方法,可以在DOM载入就绪能够读取并操纵时 ...
- 药店商品销量分析(python)
一.数据分析的步骤 二.提出问题 分析药店商品销售情况 1)月均消费次数 2)月均消费金额 3)客单价 4)消费趋势 5)热销商品.滞销商品 三.理解数据 销售数据源为excel文件 字段的含义: 共 ...