在vue中Echarts的使用与总结

最新推荐文章于 2024-08-10 08:16:24 发布

Joy_B

最新推荐文章于 2024-08-10 08:16:24 发布

阅读量1.2k

点赞数 1

分类专栏：技术总结前端框架

本文链接：https://blog.csdn.net/qq_22996201/article/details/97924047

版权

本篇文章主要讲我在开发过程中使用到的Echarts使用案例，具体的更多特性可以参考Echarts官网。(注：因为项目机密的原因，本文的代码对敏感内容进行了修改)
Echarts官网：https://echarts.baidu.com/
Echarts是一个开源的数据可视化工具,一个纯Javascript的图表库，用来制图特别方便。
在使用Echarts的时候，都需要导包，在中导入import echarts from ‘echarts’：
在这里插入图片描述

Echarts的折线图

<b-card  title="总设备折线图" class="mb-2">
  <b-table hover show-empty :items="devicehistory.list" :fields="devicehistory.fields" >
</b-table>

然后在vue的 $< s c r i p t > < / s c r i p t >$ 中定义devicehistory这个集合变量：

devicehistory: {
          list: [],
          fields: {
              month: {
                  label: '月份',
                  sortable: true,
                  'class': 'text-left'
              },
              totalDevice: {
                  label: '总设备数',
                  sortable: true,