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 './common';
@import './rightBoxCommon'; @import './rightBoxCommon';
@import './tableCommon'; @import './tableCommon';
@import './chart';
@import '../stylus/index.scss'; @import '../stylus/index.scss';
@import './font/iconfont.css'; @import './font/iconfont.css';

View File

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

View File

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