// 折线图
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折线图上下颜色渐变样式的更多相关文章

  1. echarts关系图圆心颜色渐变

    let option = { backgroundColor: '#1a4377', animationDurationUpdate: 1500, // 动画更新变化时间 animationEasin ...

  2. echarts折线图相关

    optionJKDLine = { title: { text: '告警数量趋势图', textStyle:{ //标题样式 fontStyle:'normal', fontFamily:'sans- ...

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

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

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

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

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

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

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

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

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

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

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

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

  9. echarts更改折线图区域颜色、折线颜色、折点颜色

    series : [ { name:'订单流入总数', type:'line', stack: '总量', areaStyle: { normal: { color: '#8cd5c2' //改变区域 ...

随机推荐

  1. Kali linux-信息收集-dmitry

    信息收集-dmitry DMitry(Deepmagic Information Gathering Tools 深度信息收集工具)是一个kali linux下用C语言写的工具.主要功能为端口扫描,w ...

  2. Android Toolbar中的title居中问题

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/167 Android Toolbar中的title居中问题 ...

  3. Activit 5.13 工作流部署新版本后回退到上一个版本

    有时因为某些原因Activit流程部署新版本后,还没有发起流程,回退到上一个版本.操作过程: 1.查询版本更新记录,记录字段ID_值,假设值为100: select to_char(t.deploy_ ...

  4. XML配置报错

    警告: Exception encountered during context initialization - cancelling refresh attempt: org.springfram ...

  5. JAVA反射(资源版)

    关于JAVA反射的作用可以看这篇博客(说的很详尽): https://www.cnblogs.com/jqyp/archive/2012/03/29/2423112.html 下面是关于JAVA反射的 ...

  6. 小程序的flex布局

    小程序建议使用flex布局进行排版 flex就是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员 小程序的flex布局 定义布局 display:flex flex容器的属性: flex- ...

  7. 第十三周博客作业 <西北师范大学| 周安伟>

    第十三周助教作业 助教博客链接https://home.cnblogs.com/u/zaw-315/ 本周点评作业数量无 本周点评困难的博客作业无 本周工作情况制作实验七 团队作业3的千帆图和成绩排名 ...

  8. python爬虫之深度爬取实例

    写了一个之前没完成的项目,代码优化不够,速度有点慢,应该也有错误的地方,望大佬看了之后能给点建议......... 这是开始的url,先看一下它的网页结构:http://www.cymodel.net ...

  9. Redis windows版本资源与安装

    这里提供一个windows版本的Redis百度云资源 链接: https://pan.baidu.com/s/19JY_d_J87n98OeAHK9qI4A 密码: d6dq 1,GitHub下载地址 ...

  10. C++ class 中的 const 成员函数

    const 修饰的成员函数  表示  不会修改class中的成员变量. const 和 非-const 的成员函数同事存在时, 用户定义 const 类对象,调用 const 成员函数: 定义 非-c ...