在vue中使用vue-echarts-v3的实例代码

 更新时间:2018年09月13日 10:30:45   作者:骚φ(゜▽゜*)♪白  
这篇文章主要介绍了在vue中使用vue-echarts-v3的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

特征

•轻量,高效,按需绑定事件
•支持按需导入ECharts.js图表​​和组件
•支持组件调整大小事件自动更新视图

一、安装

npm install --save echarts vue-echarts-v3

二、用法

用 vue-cli 搭建的项目,打开 build 文件夹中的 webpack.base.conf.js 文件

1、webpack 1.x 修改成如下

  {
    test: /\.js$/,
    loader: 'babel',
    include: [
      path.join(prjRoot, 'src'),
      path.join(prjRoot, 'node_modules/vue-echarts-v3/src')
    ],
     exclude: /node_modules(?![\\/]vue-echarts-v3[\\/]src[\\/])/
   },

2、webpack 2.x 修改成如下

 {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')]
   }

3、导入所有图表和组件

import IEcharts from 'vue-echarts-v3/src/full.js';

4、手动导入ECharts.js模块以减少捆绑包大小

import IEcharts from 'vue-echarts-v3/src/lite.js';
import 'echarts/lib/component/title'; //引入标题组件
import 'echarts/lib/component/legend'; //引入图例组件
import 'echarts/lib/component/tooltip'; //引入提示框组件
import 'echarts/lib/component/toolbox'; //引入工具箱组件
// ...(引入自己需要的)
import 'echarts/lib/chart/pie'; //以饼图为例

三、例子

关于Echarts的API使用参照 Echarts官网

•从接口获取的动态数据可以直接通过props从父组件传过来,替换下面的series[0].data数组中的数据
•也可以从这个组件中从接口获取动态数据。但option属性对应的变量pie必须写在computed中return出来,不能再写在data中,否则获取不到数据

<template>
 <div class="echarts">
  <IEcharts :option="pie" @ready="onReady" @click="onClick"></IEcharts>
 </div>
</template>
<script>
import IEcharts from 'vue-echarts-v3/src/lite.js';
import 'echarts/lib/component/title'; //引入标题组件
import 'echarts/lib/component/legend'; //引入图例组件
import 'echarts/lib/chart/pie';
 export default {
  components: {IEcharts},
  data: () => ({
   pie: {
    title: {
     text: 'ECharts Demo'
    },
    tooltip: {},
    legend:{
     type: 'plain',
     orient: 'vertical',
     right: 10,
     top: 20,
    },
    series: [{
     type: 'pie',
     data: [
      {name: 'A', value: 1211},
      {name: 'B', value: 2323},
      {name: 'C', value: 1919}
     ]
    }]
   }
  }),
  methods: {
   onReady(instance) {
    console.log(instance);
   },
   onClick(event, instance, echarts) {
    console.log(arguments);
   }
  }
 };
</script>
<style scoped>
 .echarts{
  width: 400px;
  height: 400px;
  margin: auto;
  text-align: center;
 }
</style>

总结

以上所述是小编给大家介绍的在vue中使用vue-echarts-v3的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 基于Vue3实现SSR(服务端渲染)功能

    基于Vue3实现SSR(服务端渲染)功能

    在现代网页开发中,用户体验日益成为网站成功的重要因素,从加载时间到SEO优化,越来越多的开发者开始关注使用服务端渲染(SSR)来提升应用的表现,本文将深入探讨 Vue 3 的 SSR 特性,并以示例代码展示如何实现这一功能,需要的朋友可以参考下
    2024-11-11
  • 使用vue-router为每个路由配置各自的title

    使用vue-router为每个路由配置各自的title

    这篇文章主要介绍了如何使用vue-router为每个路由配置各自的title,及使用vue router的方法,需要的朋友可以参考下
    2018-07-07
  • vue3 pinia踩坑及解决方案详解

    vue3 pinia踩坑及解决方案详解

    这篇文章主要为大家介绍了vue3 pinia踩坑及解决方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue-echarts如何实现图表组件封装详解

    vue-echarts如何实现图表组件封装详解

    由于在项目中需要对数据进行可视化处理,也就是用图表展示,所以下面这篇文章主要给大家介绍了关于vue-echarts如何实现图表组件封装的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue-路由精讲 二级路由和三级路由的作用

    vue-路由精讲 二级路由和三级路由的作用

    这篇文章主要介绍了vue-路由精讲 二级路由和三级路由的作用,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue+express 构建后台管理系统的示例代码

    vue+express 构建后台管理系统的示例代码

    这篇文章主要介绍了vue+express 构建后台管理系统的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue+element表格导出为Excel文件

    vue+element表格导出为Excel文件

    这篇文章主要为大家详细介绍了vue+element表格导出为Excel文件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • VUE3封装一个Hook的实现示例

    VUE3封装一个Hook的实现示例

    本文主要介绍了VUE3封装一个Hook的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-01-01
  • Vue.js 的 watch函数基本用法

    Vue.js 的 watch函数基本用法

    watch 函数是 Vue.js 提供的一个强大工具,用于响应数据变化并执行相应的回调,通过合理使用 watch 函数,我们可以实现异步数据请求、表单验证、动态样式等多种功能,这篇文章主要介绍了Vue.js 的 watch函数,需要的朋友可以参考下
    2024-08-08
  • vue h5移动端禁止缩放代码

    vue h5移动端禁止缩放代码

    今天小编就为大家分享一篇vue h5移动端禁止缩放代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10

最新评论