Vue引入echarts方法与使用介绍

更新时间：2022年08月22日 09:51:21 作者：抗争的小青年

Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，这样很多框架都能使用它，例如Vue，估计IONIC也能用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

1. 引入echarts

npm install echarts --save

在vue项目中安装

2. 将echarts设置为全局

main.js（项目入口文件）

//引入echarts文件
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

这样我们就可以使用this.$echarts来使用echarts了

3. 在相关组件中使用

要注意的是在表格显示的区域一定要定义宽度和高度，这样才可以正常显示。

组件使用element-ui的card

<div class="datamap">
    <el-row :gutter="20">
        <el-col :span="12">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>订单统计</span>
                </div>
                <div id="one"></div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>商品种类</span>
                </div>
                <div id="two"></div>
            </el-card>
        </el-col>
    </el-row>
</div>

设置表格盒子的宽度和高度(one、two)

.datamap #one {
  height: 500px;
}
.datamap #two {
  height: 500px;
}

配置钩子函数mounted时，调用图标生成函数

export default {
  name: "dataview",
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      setTimeout(() => {
        this.initCharOne();
        this.initCharTwo();
      }, 1000);
    },
	//两个图标的生成函数
    initCharOne() {},
    initCharTwo() {},
  },
};

为了防止异步导致数据无法正常显示，我这里使用setTimeout方法，让表格延迟显示，确保表格数据显示不受任务队列的影响。

配置函数initCharOne()

这里就涉及到echarts的用法了，具体方法不在这里细说，若有需要跳转echarts官方文档

initCharTwo() {
      const option = {
        dataset: [
          {
            dimensions: ["name", "age", "profession", "score", "date"],
            source: [
              ["Hannah Krause", 41, "Engineer", 314, "2011-02-12"],
              ["Zhao Qian", 20, "Teacher", 351, "2011-03-01"],
              ["Jasmin Krause ", 52, "Musician", 287, "2011-02-14"],
              ["Li Lei", 37, "Teacher", 219, "2011-02-18"],
              ["Karle Neumann", 25, "Engineer", 253, "2011-04-02"],
              ["Adrian Groß", 19, "Teacher", "-", "2011-01-16"],
              ["Mia Neumann", 71, "Engineer", 165, "2011-03-19"],
              ["Böhm Fuchs", 36, "Musician", 318, "2011-02-24"],
              ["Han Meimei", 67, "Engineer", 366, "2011-03-12"],
            ],
          },
          {
            transform: {
              type: "sort",
              config: { dimension: "score", order: "desc" },
            },
          },
        ],
        xAxis: {
          type: "category",
          axisLabel: { interval: 0, rotate: 30 },
        },
        yAxis: {},
        series: {
          type: "bar",
          encode: { x: "name", y: "score" },
          datasetIndex: 1,
        },
      };
      var myChartTwo = this.$echarts.init(document.getElementById("two")); //图标初始化\
      myChartTwo.setOption(option);
      window.onresize = function () {
        myChartTwo.resize();
      };
    },

如果你按照以上几步走下来，那你肯定可以成功展示。

到此这篇关于Vue引入echarts方法与使用介绍的文章就介绍到这了,更多相关Vue echarts内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue获取路由详细内容信息方法实例
获取路由详细内容信息是我们日常开发中经常会遇到的需求,下面这篇文章主要给大家介绍了关于vue获取路由详细内容信息的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-12-12
快速掌握Vue Router使用方法
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转
2023-01-01
前端vue中el-table增加合计行及合并单元格代码示例
在有些情况下我们会有合并表头、合并列、合并尾部合计的需求,这篇文章主要给大家介绍了关于前端vue中el-table增加合计行及合并单元格的相关资料,需要的朋友可以参考下
2023-09-09
vue缓存之keep-alive的理解和应用详解
这篇文章主要介绍了vue缓存之keep-alive的理解和应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
一篇文章学会Vue中间件管道
这篇文章主要给大家介绍了如何通过一篇文章学会Vue中间件管道的相关资料,什么是中间件管道？中间件管道是一堆不同的中间件并行运行,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-06-06
使用vue实现玉兔迎春图高亮示例详解
这篇文章主要为大家介绍了使用vue实现玉兔迎春图高亮示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
vue 自定义全局方法,在组件里面的使用介绍
下面小编就为大家介绍一下vue 自定义全局方法,在组件里面的使用。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue-loader中引入模板预处理器的实现
这篇文章主要介绍了vue-loader中引入模板预处理器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
vue实现显示消息提示框功能
这篇文章主要介绍了vue实现显示消息提示框功能,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
VUE3中h()函数和createVNode()函数的使用解读
这篇文章主要介绍了VUE3中h()函数和createVNode()函数的使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08