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