vue中使用v-chart时放大缩小屏幕，echarts图自适应
如上图所示，在放大/缩小浏览器屏幕时，echarts图可以自适应。
实现代码：
1.html:
<div class="tps">
<p>TPS</p>
<div class="tps_charts">
<v-chart ref="runTimes_creditChart" class="credit-chart" :style="{width:'100%',height: '160px',}" :options="tps_options"></v-chart>
</div>
</div>
<div class="transactions">
<div class="transactions_field">
<p>交易总数：<span>122</span></p>
<p>注入交易：<span>100</span></p>
<p>修改交易：<span>20</span></p>
<p>流转交易：<span>2</span></p>
</div>
<div class="transactions_charts">
<v-chart ref="transactions_creditChart" class="credit-chart" :style="{width:'100%',height: '180px'}" :options="transactions_options"></v-chart>
</div>
</div>
<div class="registers">
<div class="registers_field">
<p>注册总数：<span>122</span></p>
<p>安顺项目：<span>22</span></p>
<p>光大项目：<span>100</span></p>
</div>
<div class="registers_charts">
<v-chart ref="registers_creditChart" class="credit-chart" :style="{width:'100%',height: '180px',}" :options="registers_options"></v-chart>
</div>
</div>
使用了v-chart来插入echarts图，在页面中有三个echarts图，均要自适应。
mounted(){
window.addEventListener("resize", this.resizeTheChart);
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeTheChart);
},
methods: {
resizeTheChart() {
if (this.$refs.runTimes_creditChart) {
this.$refs.runTimes_creditChart.resize();
}
if (this.$refs.transactions_creditChart) {
this.$refs.transactions_creditChart.resize();
}
if (this.$refs.registers_creditChart) {
this.$refs.registers_creditChart.resize();
}
},
}
2.options:
tps_options : {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
series: [
{
name: '业务指标',
type: 'gauge',
// center: ['50%', '45%'],
detail: {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 14,
color: '#ffffff'
},
borderRadius: 3,
backgroundColor: '#5576f6',
// width: 100,
offsetCenter: ['5%', '90%'], // x, y，单位px
formatter:'{value}/s'
},
data: [
{
value: 50,
}
],
itemStyle:{//指针样式
color: '#fc572b',
},
pointer: {
width:3,//指针的宽度
length:"80%", //指针长度，按照半圆半径的百分比
shadowColor : '#ccc', //默认透明
shadowBlur: 5
},
axisLabel: {
show: true,
textStyle: {
color: '#333333', //更改坐标轴文字颜色
fontSize : 10 //更改坐标轴文字大小
}
},
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 6,
color: [[0.2, '#5576f6'], [0.8, '#5576f6'], [1, '#5576f6']]
},
},
axisTick: { // 坐标轴小标记
length:10, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto',
}
},
splitLine: { // 分隔线
length:20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto',
width: 4,
}
},
}
]
},
transactions_options: {
tooltip: {
trigger: 'item',
},
series: [
{
type:'pie',
radius: ['50%', '70%'],
// center: ['60%', '65%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{
value:122,
name: '交易总数',
itemStyle: { color: '#15c4e3' }
},
{
value:100,
name: '注入交易',
itemStyle: { color: '#5576f6' }
},
{
value:20,
name: '修改交易',
itemStyle: { color: '#fc572b' }
},
{
value:2,
name: '流转交易',
itemStyle: { color: '#f99928' }
},
]
}
]
},
registers_options: {
tooltip: {
trigger: 'item',
},
series: [
{
type:'pie',
radius: ['50%', '70%'],
// center: ['60%', '65%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{
value:122,
name: '注册总数',
itemStyle: { color: '#15c4e3' }
},
{
value:22,
name: '安顺项目',
itemStyle: { color: '#fc572b' }
},
{
value:100,
name: '光大项目',
itemStyle: { color: '#12d6a1' }
},
]
}
]
},
此时，基本上就可以了，
注意：
1.需要在main.js中引入：
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
Vue.component('v-chart', ECharts)
安装依赖：
npm install vue-echarts
2.需要对三个v-echart的ref="runTimes_creditChart" 设置不同的值，然后在方法中对对应的进行处理，若是设置为同一个值，在方法中只进行一次设置，则只有最后一个会自适应，其他的不会。
ok，就这些就可以了。
浙公网安备 33010602011771号