From 82634d1daab09be1f63dc3bc2fab03036f2dac93 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 18:18:41 +0800 Subject: [PATCH] =?UTF-8?q?echarts=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Duration/Duration.js | 27 ++++++++++++ src/components/Sensor/Sensor.js | 54 ++++++++++++++++++++++- src/components/Statistics/Statistics.js | 58 +++++++++++++++++++++++-- 3 files changed, 134 insertions(+), 5 deletions(-) diff --git a/src/components/Duration/Duration.js b/src/components/Duration/Duration.js index 3a98581..65d43c3 100644 --- a/src/components/Duration/Duration.js +++ b/src/components/Duration/Duration.js @@ -1,6 +1,10 @@ var option = { title: { left: '10%', + textStyle: { + fontWeight: 'normal', + color: '#fff', //标题颜色 + }, text: '急救时长分析', }, tooltip: { trigger: 'axis' }, @@ -8,6 +12,10 @@ var option = { x: 'center', y: 'bottom', data: ['我院记录', '国际水准', '当前数据'], + textStyle: { + fontWeight: 'normal', + color: '#fff', //标题颜色 + }, }, grid: { left: '3%', @@ -19,11 +27,30 @@ var option = { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], + axisLabel: { + textStyle: { + fontWeight: 'normal', + color: '#fff', //标题颜色 + }, + }, }, yAxis: { type: 'value', name: '秒', interval: 100, + axisLabel: { + textStyle: { + fontWeight: 'normal', + color: '#fff', //标题颜色 + }, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#666', + }, + }, }, series: [ { diff --git a/src/components/Sensor/Sensor.js b/src/components/Sensor/Sensor.js index 1fd730c..13ca551 100644 --- a/src/components/Sensor/Sensor.js +++ b/src/components/Sensor/Sensor.js @@ -1,20 +1,28 @@ var option = { title: { left: '10%', + textStyle: { + fontWeight: 'normal', + color: '#fff', //标题颜色 + }, text: '震动传感器', }, legend: { x: 'center', y: 'top', data: ['传感器1', '传感器2'], + textStyle: { + fontWeight: 'normal', + color: '#fff', //标题颜色 + }, }, xAxis: { type: 'category', + boundaryGap: false, axisLine: { //y轴 show: false, }, - // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { show: true, @@ -43,12 +51,56 @@ var option = { data: [120, 932, 401, 534, 290, 530, 320], type: 'line', smooth: true, + itemStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: '#0A4982', // 0% 处的颜色 + }, + { + offset: 1, + color: '#243859', // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + areaStyle: {}, + lineStyle: { normal: { width: 4 } }, }, { name: '传感器2', data: [220, 632, 101, 834, 490, 630, 220], type: 'line', smooth: true, + itemStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: '#B2F2FC', // 0% 处的颜色 + }, + { + offset: 1, + color: '#5BE1FB', // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + areaStyle: {}, + lineStyle: { normal: { width: 4 } }, }, ], }; diff --git a/src/components/Statistics/Statistics.js b/src/components/Statistics/Statistics.js index bff2dfe..ef3fae5 100644 --- a/src/components/Statistics/Statistics.js +++ b/src/components/Statistics/Statistics.js @@ -1,6 +1,10 @@ var option = { title: { left: '10%', + textStyle: { + fontWeight: 'normal', + color: '#fff', //标题颜色 + }, text: '急救数据统计', }, tooltip: { trigger: 'axis' }, @@ -9,27 +13,73 @@ var option = { x: 'center', y: 'top', data: ['本年', '去年'], + textStyle: { + fontWeight: 'normal', + color: '#fff', //标题颜色 + }, }, { x: 'center', y: 'bottom', data: ['本年完成', '去年同期'], + textStyle: { + fontWeight: 'normal', + color: '#fff', //标题颜色 + }, }, ], xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + axisLabel: { + textStyle: { + fontWeight: 'normal', + color: '#fff', //标题颜色 + }, + }, }, yAxis: [ { type: 'value', - interval: 100, + interval: 200, name: '人次', + axisTick: { + //y轴刻度线 + show: false, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#666', + }, + }, + nameTextStyle: { color: '#fff' }, + axisLabel: { + textStyle: { + fontWeight: 'normal', + color: '#fff', //标题颜色 + }, + }, }, { type: 'value', - interval: 100, + interval: 200, name: '数量', + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#666', + }, + }, + nameTextStyle: { color: '#fff' }, + axisLabel: { + textStyle: { + fontWeight: 'normal', + color: '#fff', //标题颜色 + }, + }, }, ], series: [ @@ -58,7 +108,7 @@ var option = { position: 'top', //在上方显示 textStyle: { //数值样式 - color: 'black', + color: 'white', fontSize: 12, }, }, @@ -78,7 +128,7 @@ var option = { position: 'top', //在上方显示 textStyle: { //数值样式 - color: 'black', + color: 'white', fontSize: 12, }, },