option = {
backgroundColor: '#0c1e55', //背景颜色
title: {
text: '测温',
x: 'center',
top: "20",
textStyle: {
//文字颜色
color: '#ffff',
//字体风格
fontStyle: 'normal',
//字体粗细
fontWeight: 'bold',
//字体系列
fontFamily: 'sans-serif',
//字体大小
fontSize: 18
},
},
color: ['#00feff', '#4693EC'],
legend: {
data: ["累计热量", "环比"],
// "bottom": 5,
top: "10%",
icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
// triangle三角形 emptyDiamond 空心菱形
//emptyCircle 空心圆型 emptyRectangle 空心长方形 emptyTriangle 空心三角形
textStyle: {
// color: "#fff", //自定义颜色
color: [], //给随颜色
},
color: ['#00feff', '#4693EC']
},
tooltip: {
trigger: 'item',
formatter: function(parms) {
var str = parms.seriesName + "</br>" +
parms.marker + "" + parms.data.name + "</br>" +
"当前温度：" + parms.data.value + "</br>" +
"目标温度：" + parms.data.value1 + "</br>"
// +
// "占比：" + parms.percent + "%";
return str;
},
},
grid: {
left: '3%', //整个曲线居左的距离
right: '4%', //整个曲线居右左的距离
bottom: '10%', //整个曲线居下左的距离
height: '70%', //整个曲线的高
containLabel: true
},
// dataZoom: [{
// type: 'slider',
// realtime: true,
// //拖拉
// handleSize: '100%', //滑动条两侧的大小
// start: 0, //开始位置
// end: 50, //结束位置
// bottom: 25, //居下的距离
// textStyle: {
// color: '#1bb4f6' // 滑动条的文字颜色
// },
// }],
xAxis: [{
type: 'category',
axisTick: {
show: false,
color: '#707070'
},
axisLabel: {
textStyle: {
fontSize: 14,
color: '#FFFF'
}
},
axisLine: {
lineStyle: {
color: '#00FF00'
}
},
data: ['测温1', '测温2', '测温3'],
},
],
yAxis: [{
type: 'value',
name: '测温',
nameTextStyle: {
fontSize: 14, //文字大小
color: '#ebf8ac' //文字颜色
},
axisLine: {
lineStyle: {
color: '#FFFF', //设置Y轴的颜色
width: 1.5, //设置Y轴的粗细
}
},
axisLabel: {
show: true,
// formatter: "{value} %", //左侧单位添加后缀
textStyle: {
color: '#00FF00' //Y轴的数据字体颜色
},
},
splitLine: {
show: true, //网格线显示
lineStyle: {
color: '#FFC125' //网格线的颜色
}
},
}, ],
series: [
{
name: '累计热量',
type: 'bar',
barWidth: '20%', //柱状图宽度
data: [{
name: '测温1',
value: '70',
value1: '20',
itemStyle: {
normal: {
color: '#1F78B4',
barBorderRadius: [50, 50, 0, 0] //柱状图圆角
}
},
label: {
show: true, //是否显示
position: 'top', //位置
distance: 15, //高度
// color: '#DB5E6A', //颜色
fontWeight: 'bolder', //加粗
fontSize: 20, //字体大小
},
},
{
name: '测温2',
value: '60',
value1: '40',
itemStyle: {
color: '#A6CEE3'
},
label: {
show: true, //是否显示
// position: 'top', //位置
// distance: 15, //高度
// color: '#DB5E6A', //颜色
// fontWeight: 'bolder', //加粗
// fontSize: 20, //字体大小
},
},
{
name: '测温3',
value: '20',
value1: '70',
itemStyle: {
color: '#B2DF8A'
},
label: {
show: true, //是否显示
position: 'top', //位置
distance: 15, //高度
// color: '#DB5E6A', //颜色
fontWeight: 'bolder', //加粗
fontSize: 20, //字体大小
},
}
]
},
{
name: '环比',
type: 'bar',
barWidth: '20%', //柱状图宽度
data: [{
name: '测温1',
value: '50',
value1: '10',
itemStyle: {
normal: {
color: '#1F78B4',
barBorderRadius: [50, 50, 0, 0] //柱状图圆角
}
},
label: {
show: true, //是否显示
position: 'top', //位置
distance: 15, //高度
// color: '#DB5E6A', //颜色
fontWeight: 'bolder', //加粗
fontSize: 20, //字体大小
},
},
{
name: '测温2',
value: '80',
value1: '60',
itemStyle: {
color: '#A6CEE3'
},
label: {
show: true, //是否显示
// position: 'top', //位置
distance: 15, //高度
// color: '#DB5E6A', //颜色
fontWeight: 'bolder', //加粗
fontSize: 20, //字体大小
},
},
{
name: '测温3',
value: '30',
value1: '50',
itemStyle: {
color: '#B2DF8A'
},
label: {
show: true, //是否显示
position: 'top', //位置
distance: 15, //高度
// color: '#DB5E6A', //颜色
fontWeight: 'bolder', //加粗
fontSize: 20, //字体大小
},
},
]
},
]
};