Vue中使用echarts图表插件

一、安装echarts依赖

npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

二、创建图表

首先需要全局引入
在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在Echarts.vue中

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

export default {name: 'hello',data () {return {msg: 'Welcome to Your Vue.js App'}},mounted(){this.drawLine();},methods: {drawLine(){// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById('myChart'))// 绘制图表myChart.setOption({title: { text: '在Vue中使用echarts' },tooltip: {},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]});}}
}

注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

这样一个简单的图表就完成了，是不是觉得很简单？假如在一个大型的项目中，而且数据是非常复杂的？那么该如何操作？

三、按需引入

由于全局引入会将所有的echarts图表打包，导致体积过大
在Echarts.vue文件中

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

使用 require 而不是 import

四、以组件的形式用echarts

从上边可以看出，你每次在使用echarts的时候，都必须要重复的引入，这样很不方便
vue作为一个组件化开发的框架，我们可以使用组件的方式进行集成。每次我们引入组件，进行使用，这样就方便的多。

对echarts进行的一个简单的vue组件的集成。
在echarts中

子组件：

props部分是我接收到的参数，父组件获取数据分发，data是父组件分发给echarts的数据源。

父组件：

Vue中使用echarts图表插件相关推荐

vue2.0_在vue中使用echarts图表插件
说明:本例子基于vue-cli脚手架搭建首先,安装echarts依赖 npm install echarts -S 注:安装NodeJS之后,使用npm来安装包使用的是国外的地址,经常会出现超时错误 ...
Vue中使echarts图表自适应
Vue中使echarts图表自适应 1.先在main.js中自定义一个全局指令,如下 // 定义全局指令 Vue.directive('resize', { // 使用局部注册指令的方式// 指令的名 ...
vue socketio 实现echarts图表动态显示
本文主要为续之前vue和flask使用socketio实现互连的文章,记一下我的Vue项目中使用echarts实现动态图表的方法. 如仍然不了解 socketio 的使用方法,可点击此看我之前写的关于 ...
在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...
vue 工程中加入 echarts 图表不显示的问题
vue 工程中加入 echarts 图表不显示的问题一.问题原因 vue 引用 echarts 方式错误,高版本采用了低版本的引用方式二.vue工程使用echarts vue官方教程 1. 安装 ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
ECharts 图表插件使用整理（图表配置实现）
ECharts 图表插件使用整理说明 ECharts 是一个 JavaScript 实现的开源可视化库,兼容当前绝大部分浏览器 IE 8 以上,是一个可高度个性化定制的数据可视化图表 ECharts ...
html5 地图效果,html5 echarts图表插件炫光的分布地图动画特效
特效描述:图表插件炫光的动画分布地图动画动画特效.html5地图动画,html5 echarts图表插件代码结构 1. 引入JS 2. HTML代码 ECharts $('#documen ...
echart高级使用_Vue:在Vue中使用echarts
前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用 ...

Vue中使用echarts图表插件

一、安装echarts依赖

二、创建图表

三、按需引入

四、以组件的形式用echarts

Vue中使用echarts图表插件相关推荐

最新文章

热门文章