vue项目整合echarts

准备工作:

首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下。安装echarts,

  1. npm install echarts -S //或
  2.  cnpm install echarts -S

安装完成之后,我们就可以开始引入我们需要的echarts了,接下来介绍几种使用echarts的方式。

1.全局引用

首先在main.js中引入echarts,将其绑定到vue原型上:

import echarts from ‘echarts‘
Vue.prototype.$echarts = echarts;

接着,我们就可以在任何一个组件中使用echarts了,接下来我们在初始化项目中的helloWorld组件中使用echarts配置图标,具体如下:

<template>
    <div>
         <div style="width:500px;height:500px" ref="chart"></div>
    </div>
</template>
<script>
export default{
   data () {
  return {};
 },
 methods: {
  initCharts () {
  let myChart = this.$echarts.init(this.$refs.chart);
  console.log(this.$refs.chart)
  // 绘制图表
  myChart.setOption({
  title: { text: ‘在Vue中使用echarts‘ },
  tooltip: {},
  xAxis: {
  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
  name: ‘销量‘,
  type: ‘bar‘,
  data: [5, 20, 36, 10, 10, 20]
  }]
  });
  }
   },
   mounted () {
  this.initCharts();
 }
}
</script>

这样下来,就可以在项目的任何地方使用echarts了。

2.局部使用

当然,很多时候没必要在全局引入ecahrts,那么我们只在单个组件内使用即可,代码更加简单:

<template>
<div>
<div style="width:500px;height:500px" ref="chart"></div>
</div>
</template>
<script>
const echarts = require(‘echarts‘);
export default{
data () {
return {};
},
methods: {
initCharts () {
let myChart = echarts.init(this.$refs.chart);
// 绘制图表
myChart.setOption({
title: { text: ‘在Vue中使用echarts‘ },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: ‘销量‘,
type: ‘bar‘,
data: [5, 20, 36, 10, 10, 20]
}]
});
}
},
mounted () {
this.initCharts();
}
}
</script>

可以看到,我们直接在组件内引入echarts,接下来跟全局引入的使用一样。区别在于,这种方式如果你想在其他组件内用echarts,则必须重新引入了。

原文地址:https://www.cnblogs.com/yanl55555/p/12544105.html

时间: 2024-10-09 00:21:11

vue项目整合echarts的相关文章

vue项目中echarts实现K线图

背景介绍: vue项目,区块链,需要写比特币和其他币种涨幅的K线图 一.安装依赖 npm install echarts -S 二.引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts 三.html 四.初始化echarts 以上配置项option直接从echarts官网复制即可 五.调用初始化echarts函数 致此,静态的K线图已经形成了,在这个项目中,我们需要每0.5s就向后台发请求, 请求K线数据,由于请求数据

vue项目中echarts属性总结

<div id="echarts" style="width: 600px;height: 400px;margin-top: 100px;margin-left: 100px"></div> js函数中: this.EchartsData = this.$echarts.init(document.getElementById('echarts')); let option1 = { title: { text: '我是折线图', //标题

Vue系列——在vue项目中使用echarts

安装echarts依赖 npm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts Hello.vue <div id="myChart" :style="{width: '300px', height: '300px'}"></div> export default {

VUE项目中按需引入ECharts.js

安装ECharts包 npm install echarts --save 引入 ECharts 在main.js中引入 1 // 引入 ECharts 主模块 2 let echarts = require('echarts/lib/echarts'); 3 // 引入折线图/柱状图等组件 4 require('echarts/lib/chart/line') 5 require('echarts/lib/chart/bar') 6 require('echarts/lib/chart/rad

vue+vuex+axios+echarts画一个动态更新的中国地图

一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save # 安装 ECharts npm install echarts --save 二. 项目结构 ├── ind

浅谈Vue项目优化

前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题 转自https://blog.csdn.net/qq_33834489/article/details/79144762 基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style>,<script&g

vue内使用echarts

18年下班年用的vue + echarts,现在才想起来总结,着实不敬业 线上的项目叫股往(http://rich.xchol.com/#/) 好了,进入正题: 首先,需要新建一个vue的项目,在vue项目的基础上,安装echarts的依赖 npm install echarts -S 全局引入echarts 第一步:找到src文件下的main.js第二步: import echarts from 'echarts' Vue.prototype.$echarts = echarts 页面里可以通

vue 插件 使用 Echarts 创建图表 (转)

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

idea搭建vue项目

一.需要了解的基本知识 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好.V8引擎执行Javascript的速度非常快,性能非常好. Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱