option = {
backgroundColor:'#071C32',
tooltip: {
trigger: 'axis',
// position: '[20,20]',
backgroundColor: 'rgba(255, 255, 255, .16)', // 设置背景颜色
textStyle: {
color: '#fff',
fontSize: 14
},
borderColor: 'rgba(255, 255, 255, .16)',
axisPointer: {
lineStyle: {
color: 'rgba(28, 124, 196, .6)'
},
},
// formatter: "{b}人员类别统计<br>{c}人"
formatter:function (params, ticket, callback) {
var htmlStr = '';
for(var i=0;i<params.length;i++){
var param = params[i];
var xName = param.name + '人员类别统计';//x轴的名称
var seriesName = param.seriesName;//图例名称
var value = param.value;//y轴值
var color = param.color;//图例颜色
if(i===0){
htmlStr += xName + '<br/>';//x轴的名称
}
htmlStr +='<div>';
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';//一个点
htmlStr += seriesName + '：' + value + '人';//圆点后面显示的文本
htmlStr += '</div>';
}
return htmlStr;
}
},
color:['#FF0000', '#F39800', '#16D6FF', '#25D677'],
legend: {
icon: 'circle',
itemWidth: 10,
itemGap: 9,
x: 'left',
y: 'center',
top: '1%',
textStyle: {
color: '#fff',
fontSize: 13,
padding:[0,8,0,8]
}
},
grid: {
top: '18%',
left: '12%',
right: '2%',
bottom: '18%',
},
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: '#2D4377'
}
},
axisLabel: {
interval: 0,
align: 'center',
rotate: '26',
margin: '20',
textStyle: {
fontSize: 14,
color: '#A9C3F0'
}
},
splitLine: {
show: false,
},
axisTick: {
show: false
},
boundaryGap: true,
data: ['08-30', '08-31', '09-01', '09-02', '09-03', '09-04', '09-05'], //this.$moment(data.times).format("HH-mm") ,
},
],
yAxis: [
{
type: 'value',
splitNumber: 6,
min: 0,
max: 500,
axisLine: {
lineStyle: {
color: '#2D4377'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#2D4377',
type: 'dashed'
},
},
axisLabel: {
color: '#A9C3F0',
textStyle: {
fontSize: 14
}
},
axisTick: {
show: false
}
},
],
series: [
{
name: '密接接触者',
type: 'line',
symbol:'circle',
showSymbol: false,
lineStyle: {
normal: {
color: '#FF2E2E',
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(255, 46, 46, .5)',
},
{
offset: 1,
color: 'rgba(255, 46, 46, .01)',
},
],
false
),
},
},
data: [80, 70, 90, 60, 65, 50, 45], //data.values
},
{
name: '密接的密接',
type: 'line',
symbol:'circle',
showSymbol: false,
lineStyle: {
normal: {
color: '#F39800',
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(243, 152, 0, .5)',
},
{
offset: 1,
color: 'rgba(243, 152, 0, .01)',
},
],
false
),
},
},
data: [140, 160, 200, 180, 200, 170, 200], //data.values
},
{
name: '风险人群',
type: 'line',
symbol:'circle',
showSymbol: false,
lineStyle: {
normal: {
color: '#16D6FF',
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(22, 214, 255, .5)',
},
{
offset: 1,
color: 'rgba(22, 214, 255, .01)',
},
],
false
),
},
},
data: [280, 350, 400, 300, 320, 295, 395], //data.values
},
{
name: '境外返秦',
type: 'line',
symbol:'circle',
showSymbol: false,
lineStyle: {
normal: {
color: '#25D677',
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(37, 214, 119, .5)',
},
{
offset: 1,
color: 'rgba(37, 214, 119, .01)',
},
],
false
),
},
},
data: [40, 20, 4, 15, 18, 8, 6], //data.values
},
],
};