添加echarts 依赖:npm install echarts -save
vue内引入依赖:import * as echarts from 'echarts';
<div id="echart" :style="{ height: chartHeight + 'px' }"
style="width: 100%; background-color: white; padding-top: 6%;"></div>
</div>
注:当前的柱状图的高已经实现动态赋值。
模拟数据:chartsKey、chartsValue。
柱状图的显示设置:op1。
const chartHeight = ref(0);
const canvas = document.createElement('canvas');
const chartsKey = ref(['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World', 'India', 'China', 'World', 'Indonesia', 'USA', 'India', 'China', 'World', 'India', 'China', 'World']);
const chartsValue = ref([18203, 23489, 29034, 104970, 131744, 630230, 104970, 131744, 630230, 23489, 29034, 104970, 131744, 630230, 104970, 131744, 630230])
const op1 = {
backgroundColor: {
type: 'pattern',
image: canvas,
repeat: 'repeat'
},
tooltip: {},
grid: [
{
top: 1,
left: 5,
containLabel: true
}
],
xAxis: [
{
type: 'value',
max: 1000000,
splitLine: {
show: true
}
}
],
yAxis: {
type: 'category',
data: chartsKey.value
},
series: [
{
name: '2011',
type: 'bar',
data: chartsValue.value
}
]
}
进入页面就计算柱状图的高度。
const setHeight = () => {
chartHeight.value = chartsKey.value.length * 26;
}
setHeight();
将准备好的dom,初始化echarts实例,然后进行绘画。
const drawLine = () => {
let boy = getBasics(getOpsParam.value);
console.log(boy);
// 准备好的dom,初始化echarts实例
let ech = document.getElementById('echart');
let eChart = echarts.init(ech);
// 绘制图表
eChart.setOption(op1);
}
绘画方法执行有个需要注意的地方,因为页面还没有完全加载完成,所以要等页面加载完成后再执行,否则的话会报错(Error: Initialize failed: invalid dom.),导致浪费了很多时间。
我这里就直接加了一个延时处理:
setTimeout(() => {
drawLine()
}, 1500)