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

2024-07-29 00:14:00

特征

•轻量，高效，按需绑定事件
•支持按需导入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的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

vue.js+Echarts开发图表放大缩小功能实例

最近使用echarts来开发某系统的图表功能,先申明我以前用的ext.js,ext.js对图表有自己的一套组件,用起来也很方便.但是由于ext.js过于臃肿,公司决定使用echarts来开发图表功能.当我们使用的时候才悲催的发现,echart绘制之后,不能随着容器div的大小而变化.而我们所开发的图表是需要有放大缩小功能,于是在网上找了很久,也没有找到合适的答案,大部分是通过监听窗口大小改变事件来设置,然而并不是我们所需要的.于是自己用了一点点时间,了解了为何echarts不能重新渲染,原来是在
Vue2 使用 Echarts 创建图表实例代码

在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件使用 cnpm 安装 Echarts cnpm install echarts -S 和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用通常是在需要使用图表的 .vue 文件中直接引入 import echarts from 'echarts' 也可以在 main
在Vue中使用echarts的实例代码（3种图）

前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他进行一些修改.我个人也偏向于原生JS编程,因此没有采用,而是自己在vue中实现了对数据的可视化处理,先来看看效果图以下数据已做脱敏处理这是目前用到的三种图. 可以看到,我在图表的外部添加了标题及说明,以及右侧的选择框组件,视图可以根据选择的不同,图表进行动态切换
vue在使用ECharts时的异步更新和数据加载详解

前言最近在学习eCharts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之前,对eCharts不熟悉的朋友们可以参考下这篇文章:http://www.jb51.net/article/128790.htm 下面话不多说了,来一起看看详细的介绍吧. 使用方法使用Echarts首先得先把Echarts.js引进来(放在文件的入口html文件里面) <script src="public/js/echarts.common.min.js&quo
在vue中添加Echarts图表的基本使用教程

前言我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D
vue中for循环更改数据的实例代码(数据变化但页面数据未变）

废话不多说了,直接给大家贴代码了,具体代码如下所示: let that = this; for(let i = 0;i<that.tableData.length;i++){ this.tableData[i].zzzk = this.midForm.zzzk; console.log(this.tableData[i].zzzk) this.tableData[i].zhje = this.tableData[i].zzzk * this.tableData[i].dj * this.tabl
vue中的面包屑导航组件实例代码

vue的面包屑导航组件用来将其放到navbar中: Breadcrumb/index.vue <template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.pat
Vue中的组件及路由使用实例代码详解

1.组件是什么组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用全局组件 <body> <div id="app">  <myzujian></myzujian> </div> </body> <script>
详解vue中使用transition和animation的实例代码

以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition:英文过渡的意思,作用是过渡效果:animation:英文活泼.生气.激励,动画片就是animation film,作用是动画效果. transition在w3school的实例: //将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px: div { width:10
vue中七牛插件使用的实例代码

本文介绍了vue中七牛插件使用,我也正在学习,分享给大家,顺便留个笔记,废话不说了,如下: <template> <div id="cxUpload" class="cx-upload"> <button id="pickfiles" class="uploadBtn">上传</button> </div> </template> <script&g
vue中computed和watch的使用实例代码解析

需求: 1.点击按钮实现天气的切换: 2.用watch进行监视天气产生变化的数据: 实现代码(helloworld.vue实现代码): <template>  <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> </div> &
完美解决vue 中多个echarts图表自适应的问题

看代码吧~ <div class="echarts"> <IEcharts :option="bar" ref="echarts"></IEcharts> </div> mounted () { this.selfAdaption () }, methods: { //echarts自适应 selfAdaption () { const self = this: setTimeout(() =>
在vue中实现清除echarts上次保留的数据(亲测有效)

因为我是将echarts封装好后,父组件只要传递值就可以进行渲染. 但是点击多次数据请求的时候echarts会多次渲染.如果试过 clear() 与setOption(this.options, true)没用之后.可以试一下下面的方法. 首先是在父组件中对数据进行请求,在赋值之前,先清空. data里定义的三组echarts数据在axios发送请求后先清空再赋值. 补充知识:vue.js使用vue-echarts给柱形图绑定点击事件我就废话不多说了,大家还是直接看代码吧~ <templa
Vue中遍历数组的新方法实例详解

1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList } 2.filter item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组 search(key
Vue中通过Vue.extend动态创建实例的方法

在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = "show"来控制它的显示隐藏.如下所示: <div> <button @click = "show = !show">弹出</button> <span v-if = "show">这是一条通过按钮控制显示隐藏的信息</span>

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

相关推荐

随机推荐