echarts折线图背景线_echarts设置折线线条颜色和折线点颜色的实例

本文主要介绍了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法,结合实例形式分析了jQuery图表插件echarts设置折线图的相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。

1、问题背景

设计一条折线图,但是图形中不用插件自带的颜色,需要自定义线条和折点的颜色

2、实现源码

(1)图形自分配颜色

echarts-设置折线图中折线线条颜色和折线点颜色

body,html{

width: 99%;

height: 99%;

font-family: "微软雅黑";

font-size: 12px;

}

#line{

width: 100%;

height: 100%;

}

$(function(){

var chart = document.getElementById('line');

var echart = echarts.init(chart);

var option = {

title: {

text: ''

},

tooltip: {

trigger: 'axis'

},

legend: {

data:['销售量']

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

toolbox: {

feature: {

saveAsImage: {}

}

},

xAxis: {

type: 'category',

boundaryGap: false,

data: ['周一','周二','周三','周四','周五','周六','周日']

},

yAxis: {

type: 'value'

},

series: [

{

name:'销售量',

type:'line',

stack: '销售量',

data:[220, 132, 601, 314, 890, 230, 510]

}

]

};

echart.setOption(option);

});

(2)线条自定义颜色

echarts-设置折线图中折线线条颜色和折线点颜色

body,html{

width: 99%;

height: 99%;

font-family: "微软雅黑";

font-size: 12px;

}

#line{

width: 100%;

height: 100%;

}

$(function(){

var chart = document.getElementById('line');

var echart = echarts.init(chart);

var option = {

title: {

text: ''

},

tooltip: {

trigger: 'axis'

},

legend: {

data:['销售量']

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

toolbox: {

feature: {

saveAsImage: {}

}

},

xAxis: {

type: 'category',

boundaryGap: false,

data: ['周一','周二','周三','周四','周五','周六','周日']

},

yAxis: {

type: 'value'

},

series: [

{

name:'销售量',

type:'line',

stack: '销售量',

itemStyle : {

normal : {

lineStyle:{

color:'#00FF00'

}

}

},

data:[220, 132, 601, 314, 890, 230, 510]

}

]

};

echart.setOption(option);

});

(3)折点自定义颜色

echarts-设置折线图中折线线条颜色和折线点颜色

body,html{

width: 99%;

height: 99%;

font-family: "微软雅黑";

font-size: 12px;

}

#line{

width: 100%;

height: 100%;

}

$(function(){

var chart = document.getElementById('line');

var echart = echarts.init(chart);

var option = {

title: {

text: ''

},

tooltip: {

trigger: 'axis'

},

legend: {

data:['销售量']

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

toolbox: {

feature: {

saveAsImage: {}

}

},

xAxis: {

type: 'category',

boundaryGap: false,

data: ['周一','周二','周三','周四','周五','周六','周日']

},

yAxis: {

type: 'value'

},

series: [

{

name:'销售量',

type:'line',

stack: '销售量',

itemStyle : {

normal : {

color:'#00FF00',

lineStyle:{

color:'#00FF00'

}

}

},

data:[220, 132, 601, 314, 890, 230, 510]

}

]

};

echart.setOption(option);

});

3、实现结果

(1)图形自分配颜色

(2)线条自定义颜色

(3)折点自定义颜色

4、问题说明

(1)设置折线线条颜色lineStyle:{

color:'#00FF00'

}

(2)设置折线折点颜色itemStyle : {

normal : {

color:'#00FF00'

}

}

相关推荐:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/261410.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

saxbuilder用法(转)

xml为我们在网络交换数据带来很大方便,在java中可以使用saxbuilder来操作xml格式文件,下面介绍一下saxbuilder的常用方法.import org.jdom.Document;import org.jdom.Element;import org.jdom.JDOMException;import org.jdom.input.SAXBuilder;import org.jdom.output.XMLOutpu…

页面添加复制代码功能

简单的"复制代码" 功能<a href"javascript:" οnclick"CopyCode(document.getElementById(code1));">复制代码</a> <div id"code1"> 点击复制 这里放代码这里放代码这里放代码这里放代码这里放代码这里放代码这里放…

Linux CentOS 5.5 服务器安装图文教程

下面开始&#xff1a; 系统版本&#xff1a;CentOS 5.5 将镜像刻成光盘&#xff0c;设置BIOS将CDROM设置为第一启动 启动画面&#xff1a; 通过提示&#xff0c;按ENTER进入图形安装模式&#xff08;E文不好的&#xff0c;赶紧补习去哈~~~&#xff09; 我们按ENTER键 信息检测&…

win10大文件无法移动到U盘

想着把自己的一些文件整理整理&#xff0c;发现稍微大点的文件竟然不能copy到U盘&#xff0c;百度了一番&#xff08;不好意思&#xff0c;最近百度犯错查的正狠^_^&#xff09;,发现因为U盘的格式不是NTFS,只要把U盘格式改为NTFS就可以copy大文件了。 方法一&#xff1a;用命令…

为多孔介质的当量直径_新型纳米多孔碳材料在催化剂载体方面的应用

成分&#xff1a;基本成分为碳91-95%&#xff0c;氧4-8%&#xff0c;氢1%&#xff0c;具有良好的导电性&#xff08;2-10 S/cm&#xff09;和优良的化学稳定性。 结构&#xff1a;内部是三维贯通的纳米孔道结构&#xff0c;每个孔与周围12个孔相连&#xff0c;孔道结构有序&…

Shell 变量的操作方法

在Shell中&#xff0c;经常会用到:和:-这样的操作符。 这两个操作符功能很相似&#xff0c;下面简单比较下: #color"red" echo "color is ${color}" //这样应该会打印color is (空白)稍微改造下: echo "color is ${color:-"no color"}"…

maven-settings.xml的那些事

1、代理<proxies> <proxies><proxy><id>optional</id>//代理名<active>true</active>//true激活该代理<protocol>http</protocol>//代理协议<username>proxyuser</username>//帐号密码<password>prox…

替换空格

题目描述&#xff1a; 请实现一个函数&#xff0c;将一个字符串中的空格替换成“%20”。例如&#xff0c;当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。 时间复杂度o(n)的算法 先遍历一次字符串统计出空格的总数&#xff0c;计算出替换之后的字符串的总长…

备份数据 宝塔linux_宝塔面板旧版本升级教程汇总—升级宝塔面板

往期教程&#xff1a;宝塔面板教程&#xff08;1&#xff09;基于云服务器搭建宝塔面板教程最全详解宝塔面板教程&#xff08;2&#xff09;宝塔面板添加WordPress站点详细图文教程宝塔面板教程&#xff08;3&#xff09;基于宝塔面板成功配置网站SSL安全证书宝塔面板教程&…

执行全文索引时出现权限不足的解决方法

&#xfeff;在Oracle中&#xff0c;SYS用户是整个数据库的所有者&#xff0c;SYS拥有数据库中几乎所有的权限。今天我们就来介绍一下使用SYS执行全文索引的建立时&#xff0c;出现了权限不足的错误。   许多人刚刚接触Oracle时&#xff0c;对于权限并不是很了解&#xff0c;…

Swift面向对象基础(上)——Swift中的类和结构体(下)

学习来自《极客学院》1 import Foundation2 3 class User {4 var name:String5 var age:Int6 init(name:String,age:Int){7 self.age age8 self.name name9 } 10 } 11 var u1 User(name:"何杨",age:23) 12 var u2 User(name:&qu…

ultraedit26 运行的是试用模式_如何并行运行你的自动化测试?

点击上方蓝色字关注我们~在自动化测试过程中的某些时刻&#xff0c;你将遇到一个共同的问题&#xff0c;那就是&#xff1a;需要花费很长时间去执行大量的UI自动化测试用例。最为有效地加速用例执行的方式就是并行地运行自动化测试。不幸地是&#xff0c;使各个自动化测试用例并…

js实现IE/Firefox的收藏功能

代码&#xff1a; function addFavorite(el){var url window.location.href,title $(head).find(title).html();try{//IEwindow.external.AddFavorite(url, title);}catch(e){ //Firefoxtry{window.sidebar.addPanel(title,url,);}catch(e){if(window.opera){ //operael.hre…

最小点割集

prim算法不仅仅可以求最小生成树&#xff0c;也可以求“最大生成树”。最小割集Stoer-Wagner算法就是典型的应用实例。 求解最小割集普遍采用Stoer-Wagner算法&#xff0c;不提供此算法证明和代码&#xff0c;只提供算法思路&#xff1a; 1.minMAXINT&#xff0c;固定一个顶点P…

问题:从键盘读取特定类型的数据(使用Scanner读取int类型)

import java.util.Scanner; public class ScannerIntTest{public static void main(String [] args){int num1,num2;num1 getIntNumber();//调用函数getIntNumber()来获取一个从键盘输入的整数num2 getIntNumber();System.out.println("first number "num1"-…

在统计学中参数的含义是指_期刊论文中科研统计学缺陷分析及解决路径

中华医学科研管理杂志, 2018,31(5) 张策, 陈淑良, 王晓桐, 等摘要目的从期刊论文统计方法缺陷方面进行分析&#xff0c;并提出解决方案。方法资料采用中国知网文献数据库中的"基础科学"及"医药卫生科技"数据库的全部文献作为抽样源&#xff0c;限定时间为…

SPOJ 962 Intergalactic Map (从A到B再到C的路线)

【题意】在一个无向图中&#xff0c;一个人要从A点赶往B点&#xff0c;之后再赶往C点&#xff0c;且要求中途不能多次经过同一个点。问是否存在这样的路线。&#xff08;3 < N < 30011, 1 < M < 50011&#xff09; 【思路】很巧的一道题&#xff0c;一般我们都是把…

【转载】在C#中运用SQLDMO备份和恢复Microsoft SQL Server数据库

在C#中运用SQLDMO备份和恢复Microsoft SQL Server数据库 SQLDMO(SQL Distributed Management Objects&#xff0c;SQL分布式管理对象)封装了Microsoft SQL Server数据库中的对象。SQLDMO是Microsoft SQL Server中企业管理器所使用的应用程序接口&#xff0c;所以它可以执行很多…

雨棚板弹性法计算简图_钢结构工程量计算、报价要点

第一部分图纸一、图纸&#xff1a;根据图纸目录&#xff0c;清理核对图纸数量&#xff0c;检查是否有遗漏。二、建筑施工图1. 设计总说明&#xff08;1&#xff09; 建筑面积、结构形式、柱距、跨度、结构布置情况&#xff1b;&#xff08;2&#xff09; 工程量计算的范围&…

ubuntu制作usb启动盘

准备&#xff1a; u盘iso镜像文件--ubuntu-12.04.2-desktop-amd64.iso烧盘软件--unetbootin-linux-583步骤&#xff1a; 格式化u盘 查看u盘信息 #mount/dev/sdb1 on /media/KINGSTON type vfat (rw,nosuid,nodev,uid1000,gid1000,shortnamemixed,dmask0077,utf81,showexec,flus…