技术标签: echarts
这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧。我在前面先放各种修改前后图片颜色的对照,后面再详细介绍代码。这样更方便阅读及读者知道,是否对自己有所帮助,其重点是如何在模板动态网页或JSP网站中插入Echarts图片。
1.修改标题及背景颜色
技术分享 技术分享
2.设置柱形图颜色
技术分享技术分享
3.修改坐标轴字体颜色
4.设置Legend颜色
技术分享
技术分享
5.修改折线颜色
技术分享 技术分享
6.修改油表盘字体大小及颜色
技术分享
7.柱状图文本鼠标浮动上的颜色设置
技术分享
推荐文章:
http://echarts.baidu.com/echarts2/doc/example/bar14.html
技术分享
http://echarts.baidu.com/echarts2/doc/example/bar15.html
技术分享
官方文档:
http://echarts.baidu.com/echarts2/doc/example.html
http://echarts.baidu.com/demo.html#gauge-car
ECharts系列 - 柱状图(条形图)实例一 JSP
1.修改标题的颜色及背景
Echarts绘制柱状图及修改标题颜色的代码如下所示:
ECharts
var labelRight = {
normal: { position: ‘right‘ }
};
var labelRight = {
normal: { position: ‘right‘ }
};
var option = {
title: {
text: ‘十大高耗水行业用水量八减两增 ‘, //标题
backgroundColor: ‘#ff0000‘, //背景
subtext: ‘同比百分比(%)‘, //子标题
textStyle: {
fontWeight: ‘normal‘, //标题颜色
color: ‘#408829‘
},
x:"center"
},
legend: {
data:[‘蒸发量‘,‘降水量‘,‘最低气温‘,‘最高气温‘]
},
tooltip : {
trigger: ‘axis‘,
axisPointer : {
// 坐标轴指示器,坐标轴触发有效
type : ‘shadow‘
// 默认为直线,可选为:‘line‘ | ‘shadow‘
}
},
grid: {
top: 80,
bottom: 80
},
xAxis: { //设置x轴
type : ‘value‘,
position: ‘top‘,
splitLine: {lineStyle:{type:‘dashed‘}},
max:‘4‘,
},
yAxis: {
type : ‘category‘,
axisLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false},
splitLine: {show: false},
data : [‘石油加工、炼焦和核燃料加工业‘ ,
‘非金属矿物制品业‘,
‘化学原料和化学制品制造业‘,
‘有色金属冶炼和压延加工业‘,
‘造纸和纸制品业‘, ‘纺织业‘,
‘电力、热力生产和供应业‘,
‘非金属矿采选业‘,
‘黑色金属冶炼和压延加工业‘,
‘煤炭开采和洗选业‘
]
},
series : [
{
name: ‘幅度 ‘,
type: ‘bar‘,
stack: ‘总量‘,
label: {
normal: {
show: true,
formatter: ‘{b}‘
}
},
data:[
{value: 0.2, label: labelRight,itemStyle:{ normal:{color:‘gray‘} } },
{value: 0.7, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},
{value: -1.1, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},
{value: -1.3, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},
{value: -1.9, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},
{value: -2.9, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},
{value: -3.0, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},
{value: -4.2, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},
{value: -4.9, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},
{value: -5.8, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},
]
}
]
};
myChart.setOption(option);
window.addEventListener("resize",function() {
myChart.resize();
});
</script>
<div id="main2" style="width: 600px;height:400px;">
</div>
其中设置颜色标题的核心代码:
title: {
text: ‘十大高耗水行业用水量八减两增 ‘, //标题
backgroundColor: ‘#ff0000‘, //背景
subtext: ‘同比百分比(%)‘, //子标题
textStyle: {
fontWeight: ‘normal‘, //标题颜色
color: ‘#408829‘
},
x:"center"
},
输出如下图所示:
技术分享 技术分享
2.设置柱形图颜色
设置柱形图颜色代码如下所示,其中颜色表参考:RGB颜色查询对照表
series : [
{
name: ‘幅度 ‘,
type: ‘bar‘,
stack: ‘总量‘,
label: {
normal: {
show: true,
formatter: ‘{b}‘
}
},
data:[
{value: 0.2, label: labelRight,itemStyle:{ normal:{color:‘bule‘} } },
{value: 0.7, label: labelRight,itemStyle:{ normal:{color:‘green‘} }},
{value: -1.1, label: labelRight,itemStyle:{ normal:{color:‘red‘} }},
{value: -1.3, label: labelRight,itemStyle:{ normal:{color:‘#FFB6C1‘} }},
{value: -1.9, label: labelRight,itemStyle:{ normal:{color:‘#EE7AE9
文章浏览阅读367次。vi 文件名 进入命令模式命令模式--i、a、o、I、A、O-->插入模式--ESC键-->命令模式i:在光标之前添加文本I:在光标行首添加文本a:在光标之后添加文本A:在光标行末添加文本o:在光标下插入新行O:在光标上插入新行命令模式--:-->编辑模式--回车-->命令模式:set nu 回车设置行号:set nonu 回车取消行号:n 移至文件的第n行:n1,n2d ..._vi unicode乱码
文章浏览阅读2.8k次。注意:task和function 都是可以综合的,但是有诸多的要求和限制,所以要谨慎使用不同点 1function 不能包含时序控制语句,只能在一个时间单位执行,而task就可以包含时序控制语句 2 function 不能调用task,而task 可以调用function 3 function至少要有一个input参数,不能有output 和 inout 类型参数,而task既可以没有参数,也可以有各种类型参数 4 function..._verilog function可综合吗
文章浏览阅读116次。题意:有一个N*M的院子,八连通的积水是认为被连接在一的,求有几个水洼。思路:从每个M开始向八个方向搜,把搜过的M变成.知道搜不到为止。时间复杂度O(8*N*M)Sample Input10 12W........WW..WWW.....WWW....WW...WW..........WW..........W....W......W...W.W.....WW.W.W.W........_poj2386算法思路
文章浏览阅读5.2k次。VPN服务器是双网卡或多网卡的配置,一块网卡连接内网,另一块连接外网,同时外网或远程的客户端可以通过建立VPN连接访问到内网资源。两块网卡分别设置好地址,外网网卡的地址是否能做的,或者是在路由器上做NAT需要进一步了解。VPN的配置VPN的配置创建用户以上操作完成后在VPN服务器上就创建了可以远程连接的用户。
文章浏览阅读437次。Digital Of factorialTime Limit:2000MS Memory Limit:32768KB 64bit IO Format:%lld & %lluSubmit Status Practice LightOJ 1045 uDebugDescriptionFactorial of an integer is defi_求x进制下的位数
文章浏览阅读1.9k次。URDF/COLLADA file is not a valid robot model.解决方法很多次遇到URDF/COLLADA file is not a valid robot model,是各种各样的错误导致的,写下来希望能对我这样的新手有所帮助。很可能是在打开moveit_setupassistant前,没有打开roscore.1.通过SolidWorks生产URDF文件之后,是不是没有编译? 新建一个文件夹,在文件夹内部创建src文件夹,把SolidWorks生成的URDF文件夹放进sr_urdf/collada file is not a valid robot model.
文章浏览阅读2.2k次。/*** 对账文件入库*@paramtyjSaleActrDTOList*@throwsIOException*/private String cmPaymentCheckInsertData(List tyjSaleActrDTOList) throwsIOException {logger.info("====对账文件入库开始========");String flag= "0";Calend..._java new sftp连接失败不抛出异常
文章浏览阅读611次。我需要通过python运行一个Excel宏,我总是会得到以下错误:result = self._oleobj_.InvokeTypes(*(dispid, LCID, wFlags, retType, argTypes) + args)pywintypes.com_error: (-2147352567, 'Exception occurred.', (0, None, None, None, 0..._excel trigger python 环境运行
文章浏览阅读321次。<?phpini_set("session.save_handler", "memcache");ini_set("session.save_path", "tcp://localhost:11211");session_start();header("Content-type:text/html;charset=utf-8");$_SESSION['view'] = 'zhangsan_session 入memcache</div>
文章浏览阅读2.4k次。Tableau Public是Tableau的免费版本,所以不能进行本地的保存,只能在Tableau的服务器创建个人的站点,进行可视化图谱的保存,每个用户有 10G的空间,可以进行发布。所以我们需要进行站点注册站点注册注册在Tableau Public的网站进行注册【链接】,点击注册创建配置文件在完善配置文件之后,即可创建个人站点个人中心查看以上,就表示个人站点已经创建成功,在使用Tableau Public创建文件,需要发布可视化图谱之后,即可发布到个人站点。..._创建tableau站点
文章浏览阅读476次。1. MySQL持久化数据,Redis只读数据redis在启动之后,从数据库加载数据。读请求:不要求强一致性的读请求,走redis,要求强一致性的直接从mysql读取写请求:数据首先都写到数据库,之后更新redis(先写redis再写mysql,如果写入失败事务回滚会造成redis中存在脏数据)2.MySQL和Redis处理不同的数据类型MySQL处理实时性数据,例如金融数据、交易数据Redis处..._为什么要先从redis里获取数据再数据库
文章浏览阅读994次。文章目录一、安装卸载二、配置软件源一、安装卸载对应英文:Advanced Packaging Toolapt 是 Linux 系统中的 安装包管理工具序号命令作用01sudo apt install 软件名安装软件02sudo apt remove 软件名卸载软件03sudo apt uograde升级已安装的软件包二、配置软件源..._aptlite 安装软件