echarts 折线图自定义颜色与修改legend颜色

option4 = {
title : {
text: '',
subtext: ''
},
color:['#2db7f5','#ff6600','#808bc6'], //关键加上这句话,legend的颜色和折线的自定义颜色就一致了
legend: {
icon: 'rectangle',
data: ['total', 'dfs_used','non_dfs_used'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#666'
}
},
/*grid:{y:15},*/
tooltip : {
trigger: 'axis'
},
calculable : true,
yAxis : [
{
type : 'value',
splitLine:{show: false},//去除网格线
//boundaryGap : [0, 0.1],
axisLabel: {
show: true,
textStyle: {
color:'#666' //这里用参数代替了
}
},
}
],
xAxis : [
{
type : 'category',
splitLine:{show: false},//去除网格线
data : ['5','10','15','20','25','30','35','40','45'],
axisLabel: {
show: true,
textStyle: {
color:'#666' //这里用参数代替了
}
},
}
],
series : [
{
name:'total',
type:'line',
symbol:'none', //这句就是去掉点的
smooth:true,
barWidth:'37',
data:[43, 48, 36, 32, 46, 32,30, 40, 29],
//symbol:'none',
//smooth:true,
itemStyle: {
normal: {
areaStyle: {type: 'default',color:'#d5f0fd'},
lineStyle:{color:'#2db7f5'}
}
},
},
{
name:'dfs_used',
type:'line',
symbol:'none', //这句就是去掉点的
smooth:true,
barWidth:'37',
data:[28, 32, 30, 52, 56, 22,20, 25, 20],
itemStyle: {
normal: {
areaStyle: {type: 'default',color:'#fff5e6'},
lineStyle:{color:'#ff6600'}
}
}
},
{
name:'non_dfs_used',
type:'line',
symbol:'none', //这句就是去掉点的
smooth:true,
barWidth:'37',
data:[20, 12, 20, 32, 46, 12,10, 15, 10],
itemStyle: {
normal: {
areaStyle: {type: 'default',color:'#dcdfee'},
lineStyle:{color:'#808bc6'}
}
}
}
]
};
echarts 折线图自定义颜色与修改legend颜色的更多相关文章
- echarts折线图柱状图的坐标轴的颜色及样式的设置
基本用法请查看echarts官网. 一.图例legend的设置. 1.字体和颜色的设置 textStyle:{ fontSize:15, color:'#fff' } 2.样式的设置 legend: ...
- echarts折线图动态改变数据时的一个bug
echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- 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折线图上下颜色渐变样式
// 折线图let lineChart = echarts.init(document.getElementById('lineChart'));let lineOption = { title: { ...
- 知识点4: 配置echarts折线图和饼图
折线图 效果图 html <template> <div id="v11-charts3"></div> </template> j ...
随机推荐
- U813.0操作员功能权限和数据权限的设置
操作员的权限有功能权限.数据权限.金额权限. 1. 给操作员设置功能权限,操作员才能进入系统进行相关业务操作. Admin用户登录无法修改账套,但可以新建.引入.输出.Demo用户每次只能进入一个账套 ...
- DevExpress TreeList 禁止节点拖动到其他节点上
背景 在做一个类似文件树的控件,支持节点从树上向其它的控件拖动程序,但是要保证树上的节点不能拖动上其他的节点上. 代码 /// <summary> /// 拖动节点完成 /// </ ...
- deepin linux 学习笔记(二)——文本编辑器
目录 deepin linux 学习笔记(二)--文本编辑器 前言 nano 小巧的命令行编辑器 通用 编辑 定位 排版 配置 vim 思路独特的超级编辑器 命令模式 插入模式 底线模式(末行模式) ...
- 深入理解Git的实现原理
0.导读 本文适合对git有过接触,但知其然不知其所以然的小伙伴,也适合想要学习git的初学者,通过这篇文章,能让大家对git有豁然开朗的感觉.在写作过程中,我力求通俗易懂,深入浅出,不堆砌概 ...
- SQL Server数据库漏洞评估了解一下
SQL Server Management Studio 17.4或更高版本的SSMS中提供了SQL Server漏洞侦测(VA)功能,此功能允许SQL Server扫描您的数据库以查找潜在的安全漏洞 ...
- windows docker redis
拉取docker docker pull hub.c.163.com/library/redis:latest 启动docker docker run -p 6379:6379 -d hub.c.16 ...
- js中innerHTML、outerHTML与innerText的用法与区别
____________________________________________________________________________________________________ ...
- 配置安全的管理访问(GNS3)
实验拓扑: 实验目的: 尝试用R2/R3远程登陆R1路由器并进行管理,在此之前先在R1配置安全的管理访问 1.端口IP配置 R1: e1/0 192.168.1.1/24 e1/1 192.168.2 ...
- 剑指offer:调整数组顺序使奇数位于偶数前面
题目 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有奇数位于数组的前半部分,所有偶数位于数组的后半部分. 分析 事实上,这个题比较简单,很多种方式都可以实现,但是其时间复杂度或空间复 ...
- Loj #3096. 「SNOI2019」数论
Loj #3096. 「SNOI2019」数论 题目描述 给出正整数 \(P, Q, T\),大小为 \(n\) 的整数集 \(A\) 和大小为 \(m\) 的整数集 \(B\),请你求出: \[ \ ...