Vue中使用echarts

Echarts在vue中使用:

  1. 先是需要引入,引入第三方库就行;(引入echarts之前,需引入jQuery的第三方库)
  2. 然在组件中使用:

构建一个有宽高容器,用于画图表,并且带有id:

<div class="chartsdom" id="bar_chart"></div>(该容器的宽高在style中规定,一定要有,不然图表不会显示出来

然后在<script>中的methods构建一个方法作图:

getChart() {
    var chartDom = document.getElementById('bar_chart');
    var myChart = echarts.init(chartDom);
    var option;
    option = {

//一些画图规则
            };
    option && myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });
}

最后执行该方法,在mounted中:this.getChart()。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值