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. CSS 三条横线等分

    .header_qian { width: 1.5rem; height: 1.5rem; background: rgba(250, 250, 250,0.7); border-radius: 50 ...

  2. 森林防火应急指挥GIS系统森林防火监测预警系统

    森林防火监测预警与应急管理三维系统含日常业务管理.物资设备管理.火情定位.火情短信平台.应急预案管理.辅助决策等功能模块.该平台可便捷集成手机等移动端,可实时查看现场视频图像.定位火场人员,实现可视化 ...

  3. Android 沉浸式状态栏完美解决方案

    现在搜索Android 沉浸式状态栏,真的是一堆一堆,写的特别多,但是真正用的舒服的真没有,在这里自己整理一下开发记录 注意,在使用这个步骤过程之前,请把之前设置的代码注释一下 把布局带有androi ...

  4. java.sql.SQLException: The server time zone value '???ú±ê×??±??' is unrecognized or represents more than one time zone.

    [报错信息] [百度翻译] 服务器时区值'???ú±ê×??±??'无法识别或表示多个时区.如果要利用时区支持,必须配置服务器或JDBC驱动程序(通过ServerTimeZone配置属性),以使用更具 ...

  5. Git创建本地版本库

    什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以追踪历史,或 ...

  6. SQLServer 日期函数及日期转换数据类型

    一.统计语句 1.--统计当前[>当天00点以后的数据] SELECT * FROM 表 WHERE CONVERT(Nvarchar, dateandtime, 111) = CONVERT( ...

  7. docker镜像和容器的导出导入

    本文介绍docker镜像和容器的导入导出,用于迁移.备份.升级等场景.主要用到export.import.save.load四个方法. 原文地址:代码汇个人博客 http://www.codehui. ...

  8. RocketMQ4.3.x 史上配置最全详解,没有之一

    最近整理了RocketMQ的配置参数一部分参考rocketmq技术内幕,一部分自己看源码猜测,有表述不清楚或不正确请广大网友指正 这里应该是最全的配置解析了,搞了2天.以后查询就好办了,仅此贡献给广大 ...

  9. 是时候选择一款富文本编辑器了(wangEditor)

    需要一款富文本编辑器,当然不能自己造轮子.本来想使用cnblog也在用的TinyMCE,名气大,功能全.但是发现TinyMCE从4.0开始,不再支持直接下载.所以还是决定选用wangEditor.遗憾 ...

  10. FB商务管理平台(Business Manager) (2)

    Business Manager 商务管理平台(以下简称BM)API 一站式管理广告帐户.主页及相关的工作人员. BM功能结构(其中:账户下的节点属于市场营销API) API / SDK FB提供了多 ...