定义了一个Echart组件
<template>
<div class="ECharts" ref="ECharts" style="width: 100%; height: 100%"></div>
</template>
<script>
// 引入 ECharts 主模块
let echarts = require('echarts/lib/echarts');
import theme from '../../assets/eChartsTheme/macarons.json'
echarts.registerTheme('macarons', theme);
// 引入柱状图
// require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
require('echarts/lib/chart/pie');
require('echarts/lib/chart/graph');
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/legend');
require('echarts/lib/component/title');
require('echarts/lib/component/markLine');
require('echarts/lib/component/dataZoom');
export default {
name: "ECharts",
data(){
return {
ECharts: null,
}
},
props:['eChartsData'],
mounted(){
let el = this.$refs['ECharts'];
this.ECharts = echarts.init(el, 'macarons');
let v;
if(typeof this.eChartsData === 'string'){
v =JSON.parse(this.eChartsData)
}else {
v = this.eChartsData
}
if(Object.keys(v).length === 0)return;
this.ECharts.setOption(v, true);
},
methods:{
handleEChartsSetOption(){
let v;
if(typeof this.eChartsData === 'string'){
v =JSON.parse(this.eChartsData)
}else {
v = this.eChartsData
}
if(Object.keys(v).length === 0)return;
this.ECharts.setOption(v, true);
}
},
watch: {
eChartsData(val){
let v;
if(typeof val === 'string'){
v =JSON.parse(val)
}else {
v = val
}
if(Object.keys(v).length === 0)return;
this.ECharts.setOption(v, true);
}
}
}
</script>
然后再外面使用
import ECharts from '../../widgets/ECharts'
<div class="headerLeft">
</div>
<div class="headerRight" ref="headerRight">
<ECharts ref="eCharts" :eChartsData="eChartsData" style="height: 300px; width: 100%"></ECharts>
</div>
.headerWrap{
display: flex;
.headerLeft{
flex-grow: 1;
}
.headerRight{
margin-left: 20px;
flex-grow: 3;
}
}
但是初次渲染的时候宽度总是不对!按理应该平铺整个空白地方。请问是什么问题???
因为echarts绘制的时候,div.ECharts这个元素处于隐藏状态,echarts获取到他的宽度是100%,然后解析为了100px,所以就成了这样。
解决方法:
1、先显示div.ECharts元素,再绘制图表
2、赋值div.ECharts元素的宽度为一个具体的px值
3、div.ECharts元素从隐藏状态变为显示状态后,resize一下echarts