echarts热力背景图_echarts各种字体颜色的修改

这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记，希望文章对你有所帮助，主要是自己的在线笔记吧。我在前面先放各种修改前后图片颜色的对照，后面再详细介绍代码。这样更方便阅读及读者知道，是否对自己有所帮助，其重点是如何在模板动态网页或JSP网站中插入Echarts图片。

1.修改标题及背景颜色

  

2.设置柱形图颜色

3.修改坐标轴字体颜色

4.设置Legend颜色

5.修改折线颜色

  

6.修改油表盘字体大小及颜色

7.柱状图文本鼠标浮动上的颜色设置

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();

});

其中设置颜色标题的核心代码：