java可以自适应的柱状图_vue——echart例: 柱状图及高度自适应

• 周
• 月
• 年

//按需引入

//引入基本模板

let echarts = require('echarts/lib/echarts')//引入图形组件

require('echarts/lib/chart/pie')

require('echarts/lib/chart/bar')

require('echarts/lib/chart/line')//引入提示框、title、图例组件

require('echarts/lib/component/tooltip')

require('echarts/lib/component/title')

require('echarts/lib/component/legend')

exportdefault{

name:'Echart',

data() {return{

tabIndex:'1',

winWid: screen.availWidth,

bar: {

list: [],

name: [],

data: []

},

barHeight:0,

options_bar: {}

}

},

mounted() {this.getCount();

},

methods: {

getCount() {

let _this= this,

getParam={

param: {

param1:***,

param2: _this.tabIndex

}

};

_this.axios.get('***', {

params: getParam

}).then(function(res) {if (res.status == 200 && res.data.result == 0) {

let _data=res.data.message;

_this.bar.list=_data.list;

_this.drawBar();

}else{

console.log('获取数据失败');

}

}).catch(function(err) {

console.log(err);

})

},

reGetCount(tab) {

let _this= this;if (_this.tabIndex ==tab) {return}else{

_this.tabIndex=tab;

_this.getCount();

}

},

drawBar() {

let _this= this,

list=_this.bar.list;for (let i = 0; i < list.length; i++) {

_this.bar.name[i]=list[i].name;

_this.bar.data[i]=list[i].num;

}

let obj= document.getElementById('chart_bar'),

chart_bar= echarts.init(document.getElementById('chart_bar'), );

chart_bar.clear();//清空画布

chart_bar.setOption({

title: {

text:'排行榜'},

tooltip: {//点击图形时显示详细数据

trigger: 'axis',

axisPointer: {

type:'shadow'}

},

legend: {

data: ['金额']

},

grid: {

left:'3%',

right:'4%',

bottom:'3%',

containLabel:true},

xAxis: {

type:'value',

name:'元',

boundaryGap:true,

axisLabel: {

interval:0,

formatter:function(value) {//金额超过千显示k

var res =value;if (res >= 1000) {

res= res / 1000 + res % 1000 + 'k';

}returnres;

}

}

},

yAxis: {

type:'category',

name:'姓名',

minInterval:1,

boundaryGap: [0, 0.1],

triggerEvent:true,

axisLabel: {

formatter:function(value) {//姓名超过3个字加省略号

var res =value;if (res.length > 3) {

res= res.substring(0, 3) + "..";

}returnres;

}

},

data: _this.bar.name,//data: ['王一王一', '张二', '吴三', '陈四', '张二', '吴三', '陈四', '王一', '张二', '吴三', '陈四']

},

series: [{

name:'金额',//注意与lengend名称必须一致，否则不显示图例

itemStyle: {//柱图背景色

color: 'lightcoral'},

type:'bar',

barWidth:10, //柱图宽度

data: _this.bar.data,//data: [7, 12, 8, 3, 7, 1000, 8, 3, 7, 8, 3]

}],

});

_this.barHeight= list.length * 50 + 100;

obj.style.height= _this.barHeight + "px";//******

//chart_bar.getDom().style.height = _this.barHeight + "px";

//chart_bar.getDom().childNodes[0].style.height = _this.barHeight + "px";

//chart_bar.getDom().childNodes[0].childNodes[0].setAttribute("height", _this.barHeight);

//chart_bar.getDom().childNodes[0].childNodes[0].style.height = _this.barHeight + "px";

//******

//我用*****部分设置高度有问题：一进页面是好的，但是tab一旦切换柱状图就会变形

chart_bar.resize();//区域更新

}

}

}