1.安装
npm install echarts -s
2.例——点击tab切换时柱状图重绘，高度根据返回数据设置。
<template>
<div>
<ul id="tabs" class="tabs">
<li class="tab" :class="{'active':tabIndex=='1'}" @click="reGetCount('1')">周</li>
<li class="tab" :class="{'active':tabIndex=='2'}" @click="reGetCount('2')">月</li>
<li class="tab" :class="{'active':tabIndex=='3'}" @click="reGetCount('3')">年</li>
</ul> <div class="canvas">
<div id="chart_bar" :style="{width: winWid+'px'}"></div>
</div>
</div>
</template>
<script>
//按需引入
// 引入基本模板
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') export default {
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';
}
return res;
}
}
},
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) + "..";
}
return res;
}
},
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();//区域更新
}
}
}
</script>