- 周
- 月
- 年
//按需引入
//引入基本模板
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();//区域更新
}
}
}