vue-cli -- 使用echarts

一、安装echarts

npm install echarts --save

二、引入echarts

因为使用的是vue-cli 3.0的ts版本,所以这个模块全局引入总是提示没有声明文件,所以只能退一步,当单个页面引入

const echarts = require('echarts')

三、调用echarts

1、创建画布

首先需要在页面中创建一个DOM,作为展示图表的画布

<div id="chart" style="width: 600px; height: 600px"></div>

2、调用echarts

在methods里面写一个方法,用来声明创建图表

methods: {
    setEchart () {
        const mychart = echarts.init(document.getElementById('chart'))
        // 这一步是设置图表的数据对象
        const option = {
            title: {} // 这个是标题对象,text: value
            tooltip: {} 这个是数据放置点的所有数据提示 trigger: axis
            legeng: {} // 这个是每个数据的说明 data: []
            xAxis: {} // 这个表示X轴的数据内容 data: []
            yAxis: {} // 这个表示Y轴的内容 type: value
            series: [] // 这个表示数据信息{data: [], name: '类名', type: '图表类型', stack: ''}
        }
    }
}

3、初始化echarts

在mounted钩子函数里执行echarts函数

mounted () {
    this.setEcharts()
}

四、按需引入

正常的按上面引入是全局引入,可以按需引入,在script里面引入

// 这个必须,是基础
const echarts = require('echarts/lib/echarts')
// 引入图表类型,bar为柱形图
require("echarts/lib/chart/bar")
// 引入辅助映射组件,如:标题,提示
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

转载于:https://www.cnblogs.com/zjh-study/p/10775764.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值