feat: chart - line 添加tooltip

This commit is contained in:
zhangyu
2021-07-06 16:34:10 +08:00
parent 036cc0b050
commit c08ceb1966
4 changed files with 24 additions and 4 deletions

13
src/assets/css/chart.scss Normal file
View File

@@ -0,0 +1,13 @@
.nz-chart-tooltip > div > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1){
display: flex;
span {
float: none;
}
> span:nth-of-type(2){
flex: 1;
display: inline-block;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
}

View File

@@ -2,5 +2,6 @@
@import './common';
@import './rightBoxCommon';
@import './tableCommon';
@import './chart';
@import '../stylus/index.scss';
@import './font/iconfont.css';

View File

@@ -14,12 +14,14 @@ const line = {
appendToBody: true,
trigger: 'axis',
textStyle: {
width: 20,
width: '20px',
overflow: 'truncate'
},
// formatter: () =>{
// return '1'
// }
className: 'nz-chart-tooltip',
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
},
xAxis: {
type: 'time'
@@ -66,12 +68,14 @@ const lineWithStatistics = {
appendToBody: true,
trigger: 'axis',
textStyle: {
width: 20,
width: '20px',
overflow: 'truncate'
},
// formatter: () =>{
// return '1'
// }
className: 'nz-chart-tooltip',
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
},
xAxis: {
type: 'time'
@@ -107,12 +111,14 @@ const lineStack = {
appendToBody: true,
trigger: 'axis',
textStyle: {
width: 20,
width: '20px',
overflow: 'truncate'
},
// formatter: () =>{
// return '1'
// }
className: 'nz-chart-tooltip',
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
},
xAxis: {
type: 'time'

View File

@@ -1,6 +1,6 @@
<template>
<div style="padding: 10px 0 20px 20px;">
<div class="cn-panel">
<div class="cn-panel" id="cn-panel">
<div class="panel__time">
<DateTimeRange class="date-time-range" :start-time="startTime" :end-time="endTime" ref="dateTimeRange" @change="reload"/>
<TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="endTime"/>