echarts各种字体颜色修改_echarts 文字颜色-程序员宅基地

技术标签: 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 myChart = echarts.init(document.getElementById(‘main‘));

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
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41193409/article/details/82624735

智能推荐

linux vi编辑器 乱码,vi编辑器笔记 + vim乱码的解决-程序员宅基地

文章浏览阅读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乱码

Verilog编程之道-- task 和 function_verilog function可综合吗-程序员宅基地

文章浏览阅读2.8k次。注意:task和function 都是可以综合的,但是有诸多的要求和限制,所以要谨慎使用不同点 1function 不能包含时序控制语句,只能在一个时间单位执行,而task就可以包含时序控制语句 2 function 不能调用task,而task 可以调用function 3 function至少要有一个input参数,不能有output 和 inout 类型参数,而task既可以没有参数,也可以有各种类型参数 4 function..._verilog function可综合吗

poj2386 dfs_poj2386算法思路-程序员宅基地

文章浏览阅读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算法思路

Windows Server 配置(七)VPN服务器的安装-程序员宅基地

文章浏览阅读5.2k次。VPN服务器是双网卡或多网卡的配置,一块网卡连接内网,另一块连接外网,同时外网或远程的客户端可以通过建立VPN连接访问到内网资源。两块网卡分别设置好地址,外网网卡的地址是否能做的,或者是在路由器上做NAT需要进一步了解。VPN的配置VPN的配置创建用户以上操作完成后在VPN服务器上就创建了可以远程连接的用户。

Light oj 1045 (求某个数的阶乘在x进制下的位数)_求x进制下的位数-程序员宅基地

文章浏览阅读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进制下的位数

URDF/COLLADA file is not a valid robot model.解决方法-程序员宅基地

文章浏览阅读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.

随便推点

java 连接 sftp失败_关于java调用sftp下载文件报 No such File 错误的问题总结-程序员宅基地

文章浏览阅读2.2k次。/*** 对账文件入库*@paramtyjSaleActrDTOList*@throwsIOException*/private String cmPaymentCheckInsertData(List tyjSaleActrDTOList) throwsIOException {logger.info("====对账文件入库开始========");String flag= "0";Calend..._java new sftp连接失败不抛出异常

python能在excel运行吗-Python:使用Python运行Excel宏-程序员宅基地

文章浏览阅读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 环境运行

session入memcache_session 入memcache-程序员宅基地

文章浏览阅读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>

创建Tableau Public个人站点_创建tableau站点-程序员宅基地

文章浏览阅读2.4k次。Tableau Public是Tableau的免费版本,所以不能进行本地的保存,只能在Tableau的服务器创建个人的站点,进行可视化图谱的保存,每个用户有 10G的空间,可以进行发布。所以我们需要进行站点注册站点注册注册在Tableau Public的网站进行注册【链接】,点击注册创建配置文件在完善配置文件之后,即可创建个人站点个人中心查看以上,就表示个人站点已经创建成功,在使用Tableau Public创建文件,需要发布可视化图谱之后,即可发布到个人站点。..._创建tableau站点

先访问redis再访问mysql_Redis和MySQL数据一致中出现的几种情况-程序员宅基地

文章浏览阅读476次。1. MySQL持久化数据,Redis只读数据redis在启动之后,从数据库加载数据。读请求:不要求强一致性的读请求,走redis,要求强一致性的直接从mysql读取写请求:数据首先都写到数据库,之后更新redis(先写redis再写mysql,如果写入失败事务回滚会造成redis中存在脏数据)2.MySQL和Redis处理不同的数据类型MySQL处理实时性数据,例如金融数据、交易数据Redis处..._为什么要先从redis里获取数据再数据库

apt 软件安装_aptlite 安装软件-程序员宅基地

文章浏览阅读994次。文章目录一、安装卸载二、配置软件源一、安装卸载对应英文:Advanced Packaging Toolapt 是 Linux 系统中的 安装包管理工具序号命令作用01sudo apt install 软件名安装软件02sudo apt remove 软件名卸载软件03sudo apt uograde升级已安装的软件包二、配置软件源..._aptlite 安装软件

推荐文章

热门文章

相关标签