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颜色的更多相关文章

  1. echarts折线图柱状图的坐标轴的颜色及样式的设置

    基本用法请查看echarts官网. 一.图例legend的设置. 1.字体和颜色的设置 textStyle:{ fontSize:15, color:'#fff' } 2.样式的设置 legend: ...

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

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

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

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

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

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

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

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

  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折线图上下颜色渐变样式

    // 折线图let lineChart = echarts.init(document.getElementById('lineChart'));let lineOption = { title: { ...

  9. 知识点4: 配置echarts折线图和饼图

    折线图 效果图 html <template> <div id="v11-charts3"></div> </template> j ...

随机推荐

  1. H3C交换机S5500划分VLAN

    好记性不如烂笔头! H3C交换机S5500划分VLAN       将H3C S5500换机现在需要分三网段,分别是VLAN14,VLAN15,VLAN16,交换机中默认全部口是VLAN1.   H3 ...

  2. ext组件中的查询

    组件中的查询依赖于组件树,往上可追溯父组件,往下可查找子组件. 组件中的查询主要包括8个方法:up.down.query.child.nextNode.nextSibiling.previoutNod ...

  3. 从0开始的Python学习013编写一个Python脚本

    通过之前的学习我们已经了解了Python的很多基础运用了,现在我们尝试着做一个有使用价值的小脚本. 问题 需求: 我想要一个可以给我备份重要文件的程序. 需求分析: 首先文件是有存储路径,文件的路径和 ...

  4. powershell-脚本运行权限政策

    获取当前策略:Get-ExecutionPolicy 设置当前策略:Set-ExecutionPolicy Unrestricted Restricted——默认的设置, 不允许任何script运行 ...

  5. Linux(一)—— Unix&Linux 历史

    Linux(一)-- Unix&Linux 历史 Unix =Unix内核+Unix实用工具 Unix Unix 的诞生 Unix的历史可以追溯到20世纪60年代中期,当时麻省理工学院,AT& ...

  6. Binwalk的安装和使用

    Binwalk的安装和使用 一.安装Git 参考链接:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067 ...

  7. flask wtforms组件详解

    一.简介 在flask内部并没有提供全面的表单验证,所以当我们不借助第三方插件来处理时候代码会显得混乱,而官方推荐的一个表单验证插件就是wtforms.wtfroms是一个支持多种web框架的form ...

  8. django项目外部的脚本文件执行ORM操作,无需配置路由、视图启动django服务

    #一.将脚本路径添加到python的sys系统环境变量里 import sys # sys.path.append('c:/Users/Administrator/www/mymac') #第一种.绝 ...

  9. Python学习步骤如何安排?

    一.清楚学习目标 无论是学习什么知识,都要有一个对学习目标的清楚认识. 只有这样才能朝着目标持续前进,少走弯路,从学习中得到不断的提升,享受python学习计划的过程. 二.基本python 知识学习 ...

  10. 关于vue生命周期

    官网给出的实例的生命周期图如下: beforeCreate(页面创建前),created(页面创建后),beforeMount(页面载入前),mounted(页面载入后),beforeUpdate(页 ...