解决方案：将其做成悬浮层 显示出来
<template>
<div
class="chart-warp"
>
<v-chart
:options="options"
class="echarts"
></v-chart>
</div>
</template>
<script>
import * as ServiceApi from '../../../api/index'
import ChartResizeMixin from '@/share/mixins/ChartResizeMixin'
export default {
mixins: [ChartResizeMixin],
props: {
list: {
type: Object,
default: null
}
},
data () {
return {
echartsSingleList: {},
XAxis: [],
YAxis: [],
min: 2,
max: 4
}
},
computed: {
options () {
return {
title: {
text: '单体电阻趋势图',
textStyle: { // 标题字体属性
fontWeight: 'normal',
fontSize: '14px'
},
left: '80'
},
tooltip: {
trigger: 'axis', // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
axisPointer: {
type: 'shadow'// 阴影指示器
},
formatter: function (params) {
let str = ''
for (let i = 0; i < params.length; i++) {
str += '<p>' + params[i].marker + params[i].seriesName + ':' + params[i].value + '</p>'
}
const tooltipHtml =
'<div style="width:fit-content;padding-right:20px;max-height:200px;overflow-y:auto"> ' +
params[0].axisValue +
str +
'</div>'
return tooltipHtml
},
appendToBody: true,
// 可以进入tooltip
enterable: true
},
grid: { // 直角坐标系内绘图网格
left: 80, // grid 组件离容器左侧的距离。
right: 30, // grid 组件离容器右侧的距离。
bottom: 15, // grid 组件离容器下侧的距离。
top: 30, // grid 组件离容器上侧的距离。
containLabel: true // grid 区域是否包含坐标轴的刻度标签。
},
xAxis: {
type: 'category', // 坐标轴类型 类目轴，适用于离散的类目数据
show: true, // 是否显示x轴
axisLine: {
show: true// 是否显示坐标轴轴线。
},
axisTick: {
show: false // 是否显示坐标轴刻度。
},
data: this.XAxis // 横轴坐标值
},
dataZoom: [{
type: 'slider', // 给x轴设置滚动条
show: true, // flase直接隐藏图形
xAxisIndex: [0],
bottom: 10,
height: 10,
showDetail: false,
startValue: 0, // 滚动条的起始位置
endValue: 9 // 滚动条的截止位置（按比例分割你的柱状图x轴长度）
},
{
type: 'inside', // 设置鼠标滚轮缩放
show: true,
xAxisIndex: [0],
startValue: 0,
endValue: 9
}
],
yAxis: {
type: 'value', // 坐标轴类型 数值轴，适用于连续数据。
axisLine: {
show: true// 是否显示坐标轴轴线。
},
axisTick: {
show: true// 是否显示坐标轴刻度。
},
boundaryGap: ['0', '0.2'],
min: this.min,
max: this.max
},
series:
Object.keys(this.YAxis).map((item, index) => {
return {
name: item,
type: 'line',
smooth: true,
symbolSize: 3,
symbol: 'circle',
data: this.YAxis[index]
}
})
}
}
},
methods: {
// 请求趋势图数据
async getCellTrendListData () {
const { data } = await ServiceApi.getCellTrendList(this.list)
this.echartsSingleList = data
const time = []
const minMax = []
// 拿到x轴坐标
// 遍历每一个下面的数据 拿到时间
Object.keys(data).map((item, index) => {
// 拿到所有时间 去重
data[item].map(o => {
if (!time.includes(o.kpiTime)) {
time.push(o.kpiTime)
}
if (!minMax.includes(o.resistance)) {
minMax.push(o.resistance)
}
})
})
// 设置最大值最小值
this.min = Math.floor(Math.min(...minMax))
this.max = Math.ceil(Math.max(...minMax))
// 坐标轴排序
this.XAxis = time.sort((a, b) => a.kpiTime > b.kpiTime ? -1 : 1)
// 拿到y轴
Object.keys(data).map((key, item) => {
this.YAxis[key] = []
data[key].map(o => {
// if (!this.YAxis[key].includes(o.resistance)) {
this.YAxis[key].push(o.resistance)
// }
})
})
}
},
created () {
// console.log(this.list)
},
mounted () {
this.getCellTrendListData()
},
// 卸载时候
destroyed () {
/* debugger
this.refs.echartsSingle.style.diaplay = 'none' */
},
watch: {
}
}
</script>
<style lang="scss" scoped>
.chart-warp {
position: relative;
}
.echarts {
width: 550px;
height: 500px!important;
}
:deep(.canvas) {
width: 550px;
height: 500px!important;
}
</style>
2. echarts显示滚动条 配置datazoom
<template>
<div class="chart-warp">
<v-chart
:options="options"
class="echarts"
></v-chart>
</div>
</template>
<script>
import * as ServiceApi from '../../../api/index'
import ChartResizeMixin from '@/share/mixins/ChartResizeMixin'
export default {
mixins: [ChartResizeMixin],
props: {
list: {
type: Object,
default: null
}
},
data () {
return {
echartsData: [],
XAxis: [],
min: 0,
max: 1
}
},
computed: {
options () {
return {
title: {
text: '蓄电池组电容量趋势图',
left: 'center',
textStyle: { // 标题字体属性
fontWeight: 'normal',
fontSize: '14px'
}
},
tooltip: {
trigger: 'axis', // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
axisPointer: {
type: 'shadow'// 阴影指示器
}
},
legend: {
show: true, // echarts上面 线条（图例）名称提示
right: 10 // 图例组件离容器右侧的距离。
},
grid: { // 直角坐标系内绘图网格
left: '3%', // grid 组件离容器左侧的距离。
right: 30, // grid 组件离容器右侧的距离。
bottom: 15, // grid 组件离容器下侧的距离。
top: 30, // grid 组件离容器上侧的距离。
containLabel: true // grid 区域是否包含坐标轴的刻度标签。
},
xAxis: {
type: 'category', // 坐标轴类型 类目轴，适用于离散的类目数据
show: true, // 是否显示x轴
axisLine: {
show: true// 是否显示坐标轴轴线。
},
axisTick: {
show: false // 是否显示坐标轴刻度。
},
data: this.XAxis // 横轴坐标值
},
yAxis:
{
type: 'value',
name: '电容量',
min: this.min,
max: this.max
},
series: [
{
name: '电容量',
type: 'line',
smooth: true,
symbolSize: 3,
symbol: 'circle',
data: this.echartsData.map(item => item.capacity)
}
],
dataZoom: [{
type: 'slider', // 给x轴设置滚动条
show: true, // flase直接隐藏图形
xAxisIndex: [0],
bottom: 10, //距离下方高度
height: 10, //滚动条高度
showDetail: false,
startValue: 0, // 滚动条的起始位置
endValue: 9 // 滚动条的截止位置（按比例分割你的柱状图x轴长度）
},
{
type: 'inside', // 设置鼠标滚轮缩放
show: true,
xAxisIndex: [0],
startValue: 0,
endValue: 9
}
]
}
}
},
created () {
this.getBatteryTrialListData()
// console.log(this.list)
},
mounted () {
},
methods: {
// echarts 电池组数据
async getBatteryTrialListData () {
const { data } = await ServiceApi.getBatteryTrialList(this.list)
this.echartsData = data.sort((a, b) => a.kpiTime > b.kpiTime ? 1 : -1)
// 获取x轴数据
this.echartsData.map(item => this.XAxis.push(item.kpiTime))
const minMax = []
this.echartsData.map(item => minMax.push(item.capacity))
// 设置最大值最小值
this.min = Math.floor(Math.min(...minMax))
this.max = Math.ceil(Math.max(...minMax))
}
},
watch: {
list: {
deep: true,
immediate: true,
handler (val) {
// console.log(val)
}
},
XAXis: {
deep: true,
immediate: true,
handler (val) {
// console.log(val)
}
}
}
}
</script>
<style lang="scss" scoped>
.chart-warp {
position: relative;
}
.echarts {
width: 500px;
height: 550px;
}
:deep(.canvas) {
width: 500px;
height: 550px;
}
</style>
