本文章主要讲述vue2开发可视化大屏,echars图形会随着浏览器窗口大小而自适应,用到了 .flexible.js 插件把屏幕分成24等分达到目的,公司需求是一个页面多个不同的图表.图表有些是相同的,所以我对图表做了个封装,以其中一个图表为例子
1-把下载好的flexible.js,放在所需项目里,之后直接导入到可视化大屏页面即可
2-页面分成24等分,以1920为例,1rem等于80px,把页面的px全部写为rem单位
3-封装的echars代码如下,一个页面多个相同图表,就用ref的方式初始化实例,不然页面只有最后一个图表会自适应.前面的自适应不了,注意!!每个图表的id值必须要不一致,不然只会显示一个图表
<template>
<div :id="id" ref="echarts" style="width: 100%; height: 100%"></div>
</template>
<script>
// import echartMixins from '@/utils/resizeMixins'
import * as echarts from 'echarts'
export default {
props: ['id', 'setOption'],
// mixins: [echartMixins],
created() {
window.setTimeout(() => {
this.columnar_echarts()
}, 1000)
},
watch: {
setOption: {
deep: true,
handler() {
this.columnar_echarts()
}
}
},
data() {
return {
myChart: null
}
},
mounted() {
// this.columnar_echarts(
},
methods: {
columnar_echarts() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(this.$refs.echarts)
this.$nextTick(() => {
myChart.resize()
})
// setTimeout(() => {
window.addEventListener('resize', function () {
myChart.resize()
})
// }, 300)
// this.myChart = echarts.init(document.querySelector(`#${this.id}`))
var option = {
backgroundColor: '#0c1d49',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '4%',
right: '4%',
bottom: '15%',
top: '17%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: this.setOption.xAxis,
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
},
axisLabel: {
color: '#e2e9ff',
textStyle: {
fontSize: ".15rem"
},
interval: 0,
rotate: 0
}
}
],
yAxis: [
{
axisLabel: {
formatter: '{value}',
color: '#e2e9ff'
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,1)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
}
}
],
// 滚动条
dataZoom: [
{
show: true,
height: 15,
xAxisIndex: [0],
bottom: 10,
start: 10,
end: 80,
// handleIcon:
// 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '100%',
handleStyle: {
color: '#d3dee5'
},
textStyle: {
color: '#fff'
},
borderColor: '#90979c'
},
{
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35
}
],
series: [
{
type: 'bar',
data: this.setOption.series,
barWidth: '15px',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#00e8f5' },
{ offset: 0.5, color: '#00a6d6' },
{ offset: 1, color: '#188df0' }
]),
barBorderRadius: [10, 10, 0, 0],
shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4
},
label: {
show: true,
lineHeight: 30,
position: ['5', '-30'],
distance: 1,
rich: {
d: {
color: '#3CDDCF'
},
a: {
color: '#fff',
align: 'center'
},
b: {
width: 1,
height: 10,
borderWidth: 1,
borderColor: '#234e6c',
align: 'left'
}
}
}
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
},
destroyed() {
//在组件生命周期结束的时候销毁。 removeEventListener和addEventListener中对应的参数要一致。
window.removeEventListener('resize', function () {
myChart.resize()
})
}
}
</script>
<style lang="less" scoped>
</style>
4-如果只需要响应一个图表的话,可以使用
// 1.单个组件封装调用,用下面这个
var myChart = echarts.init(document.getElementById("id名"));
window.onresize = myChart.resize;
文章到此结束,希望对你有所帮助~