vant + echarts + 微信公众号页面 实现柱状图

添加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)