在Vue上初级使用ECharts

1、安装ECharts

npm install echarts –save

2、在main.js上引用ECharts

import echarts from ‘echarts’

3、在.vue页面为 ECharts 准备一个具备大小(宽高)的 DOM

<div class="charts" >
     <div id="myChart" style="width:1000px;height:500px"></div>
</div>

4、在mounted时通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的图表

mounted(options){
    let echarts = require('echarts/lib/echarts')// 引入基本模板,如果在项目中对体积要求比较苛刻,也可以只按需引入需要的模块(可以按需引入的模块列表见见本博客底部)
    // 例如:引入柱状图
    //require('echarts/lib/chart/bar');
    let chartBox=document.getElementsByClassName('charts')[0]
    let myChart=document.getElementById('myChart')
    function resizeCharts() {//为调整图标尺寸的方法
        myChart.style.width=chartBox.style.width+'px'
        myChart.style.height=chartBox.style.height+'px'
            }
     let mainChart = echarts.init(myChart)// 基于准备好的dom,初始化echarts实例
     var option = null;
     // 指定图表的配置项和数据
     option = {
         title: {
              text: 'ECharts图表'
           },
         tooltip: {},
         legend: {
              data:['平均成绩']
           },
          xAxis: {
              data: ["A班","B班","C班","D班","E班"]
           },
          yAxis: {},
          series: [{
              name: '平均成绩',
              type: 'bar',
              data: [95, 88, 80, 77, 75, 70]
           }]
       };
     // 使用刚指定的配置项和数据显示图表。
     if (option && typeof option === "object") {
         mainChart.setOption(option, true)
      }
 }

可以按需引入的模块列表见
https://github.com/ecomfe/echarts/blob/master/index.js

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值