网上找了一天终于解决
装一个element的插件
npm install element-resize-detector
main方法中
import 'element-resize-detector'
组件中图表
<div ref="myDivrain"
style="width:100%;height:450px" />
组件中导入方法
import elementResizeDetectorMaker from 'element-resize-detector'
mounted方法中
var erd = elementResizeDetectorMaker()
erd.listenTo(this.$refs.myDivrain, function (element) {
var width = element.offsetWidth
var height = element.offsetHeight
that.$nextTick(function () {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
that.myChart.resize()
})
})
如果看不懂的话下面的链接
转载
以下为全部代码
<template>
<div>
<div ref="myDivrain"
style="width:100%;height:450px" />
</div>
</template>
<script>
import * as echarts from 'echarts/core'
import { TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, DataZoomComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import elementResizeDetectorMaker from 'element-resize-detector'
echarts.use([TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, LineChart, CanvasRenderer, UniversalTransition, DataZoomComponent])
export default {
props: ['rainDialogVisible'],
data () {
return {
myChart: null,
list: [],
X: [],
Y: [],
Z: []
}
},
mounted () {
this.initdata()
this.initChars()
const that = this
var erd = elementResizeDetectorMaker()
erd.listenTo(this.$refs.myDivrain, function (element) {
var width = element.offsetWidth
var height = element.offsetHeight
that.$nextTick(function () {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
that.myChart.resize()
})
})
},
methods: {
initdata (newdata) {
this.list = [
{ X: ['1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2'] },
{ Y: ['1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2'] }
]
this.list.forEach(o => {
this.X.push(o.X)
this.Y.push(o.Y)
})
},
initChars () {
this.myChart = echarts.init(this.$refs.myDivrain) // 得到图表实例
this.myChart.showLoading()
var maxData1 = this.calMax(this.Y)
var minData1 = this.calMin(this.Y)
var maxData2 = this.calMax(this.Z)
var minData2 = this.calMin(this.Z)
this.myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器配置项。
type: 'line', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
axis: 'auto', // 指示器的坐标轴。
snap: true // 坐标轴指示器是否自动吸附到点上
}
},
legend: {
x: 'center', // 可设定图例在左、右、居中
y: 'bottom', // 可设定图例在上、下、居中
padding: [100, 0, 0, 0] // 可设定图例[距上方距离,距右方距离,距下方距离,距左方距离]
},
grid: {
left: '6%',
right: '6%',
bottom: '6%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: this.X,
axisLabel: {
color: 'black',
fontSize: '12',
show: true,
formatter: function (value) {
var ret = '' // 拼接加\n返回的类目项
var maxLength = 10 // 每项显示文字个数
var valLength = value.length // X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
if (rowN > 1) {
// 如果类目项的文字大于5,
for (var i = 0; i < rowN; i++) {
var temp = '' // 每次截取的字符串
var start = i * maxLength // 开始截取的位置
var end = start + maxLength // 结束截取的位置
// 这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
temp = value.substring(start, end) + '\n'
ret += temp // 凭借最终的字符串
}
var newvalue = ret.slice(0, -10)
return newvalue + '8时'
} else {
return value.slice(0, -8)
}
}
},
splitLine: {
show: true,
lineStyle: {
color: '#ddd',
type: 'solid'
}
},
axisTick: {
// 坐标轴刻度相关设置
show: false, // 是否显示坐标轴刻度。
alignWithLabel: false, // 类目轴中在 boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐
interval: 'auto', // 坐标轴刻度的显示间隔,在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推
inside: false, // 坐标轴刻度是否朝内,默认朝外。
length: 5, // 坐标轴刻度的长度。
lineStyle: 'mylineStyle'
}
}
],
yAxis: [
{
type: 'value',
name: '流量(m³/s)',
position: 'left',
min: minData1,
max: maxData1,
splitNumber: 6, // 设置坐标轴的分割段数
interval: (maxData1 - minData1) / 6, // 标轴分割间隔
axisLabel: {
formatter: function (v) {
return v.toFixed(1) // 0表示小数为0位,1表示1位小数,2表示2位小数
},
color: '#5470C6'
},
axisLine: {
onZero: false // y轴是否在x轴0刻度上
}
},
{
type: 'value',
name: '水位(m)',
position: 'right',
min: minData2,
max: maxData2,
splitNumber: 6,
interval: (maxData2 - minData2) / 6,
axisLabel: {
formatter: function (v) {
return v.toFixed(2) // 0表示小数为0位,1表示1位小数,2表示2位小数
},
color: '#91CC75'
},
axisLine: {
onZero: false // y轴是否在x轴0刻度上
}
}
],
series: [
{
smooth: true,
name: '流量(m³/s)',
type: 'line',
stack: '', // 堆叠
showSymbol: false, // 是否默认展示圆点
symbolSize: 10, // 设定实心点的大小
symbol: 'circle', // 设定为实心点
yAxisIndex: 0,
emphasis: {
focus: 'series'
},
data: this.Y
},
{
smooth: true,
name: '水位(m)',
type: 'line',
stack: '', // 堆叠
showSymbol: false, // 是否默认展示圆点
symbolSize: 10, // 设定实心点的大小
symbol: 'circle', // 设定为实心点
yAxisIndex: 1,
emphasis: {
focus: 'series'
},
data: this.Z
}
],
dataZoom: {
// 放大和缩放
type: 'inside'
}
})
this.myChart.hideLoading()
},
// 获取最大值方法
calMax (arr) {
var max = Math.max.apply(null, arr) // 获取最大值方法
var maxint = Math.ceil(max / 5) // 向上以5的倍数取整
var maxval = maxint * 5 + 5 // 最终设置的最大值
return maxval // 输出最大值
},
// 获取最小值方法
calMin (arr) {
var min = Math.min.apply(null, arr) // 获取最小值方法
var minint = Math.floor(min / 1) // 向下以1的倍数取整
var minval = minint * 1 - 5 // 最终设置的最小值
return minval // 输出最小值
}
}
}
</script>
<style scoped>
</style>