首页 > 其他分享 >vue中使用echarts的两种方法

vue中使用echarts的两种方法

时间:2023-04-11 11:11:57浏览次数:49  
标签:两种 myEcharts Echarts vue mounted data echarts

vue中使用echarts的两种方法

Posted on 2021-08-15 18:59  书中枫叶  阅读(33524)  评论(1)  编辑  收藏  举报

在vue中使用echarts有两种方法
一、第一种方法
1、通过npm获取echarts

npm install echarts --save

2、在vue项目中引入echarts

在 main.js 中添加下面两行代码

import * as echarts from ‘echarts’;

Vue.prototype.$echarts = echarts

注:import echarts from 'echarts' 引入echarts后,不能全局使用echarts,所以通过Vue.prototype将echarts保存为全局变量。原则上$echarts可以为任意变量名。

3、新建Echarts.vue文件

在 template 中添加一个存放echarts的‘div’容器
添加 myEcharts() 方法,将官方文档中的script内容复制到myEcharts()中
修改 echarts.init() 为 this.$echarts.init() ,因为上面第二部,将echarts保存到全局变量$echarts中。
在mounted中调用myEcharts()方法

复制代码
//在Echarts.vue文件中
<template>
  <div class="Echarts">
    <div id="main" style="width: 600px;height: 400px;"></div>
  </div>
</template>
 
<script>
export default {
  name: 'Echarts',
  methods: {
    myEcharts(){
      var myChart = this.$echarts.init(document.getElementById('main'));
      //配置图表
      var option = {
        title: {
          text: 'echarts入门示例',
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5,20,36,10,10,20]
        }]
      };
      myChart.setOption(option);
    }
  },
  mounted(){
    this.myEcharts();
  }
}
</script>
 
<style>
 
</style>
复制代码

 

注:本例函数中使用ES6写法。mounted(){}等同于mounted:function(){}。myEcharts()方法同理。最后添加进行路由配置。

二、使用vue-echarts
1、先npm安装vue-echarts

npm install echarts vue-echarts

2、除了全量引用echarts,我们还可以采用按需引入的方式

复制代码
//在main.js中引入
 
 
import Echarts from 'vue-echarts'
import 'echarts/lib/chart/line'
 
Vue.component('chart',Echarts)
复制代码

3、然后在组件中使用

复制代码
//hello.vue中
 
<template>
  <div class="hello">
    <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
  </div>
</template>
 
<script>
export default {
  name: 'hello',
  data() {
    return {
      orgOptions: {},
    }
  },
  mounted() {
    this.orgOptions = {
      xAxis: {
        type: 'category',
        data: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820,932,901,934,1290,1330,1320],
        type: 'line',
        smooth: true
      }]
    }
  }
}
</script>
 
<style>
 
</style>
复制代码

 

 

本文来自博客园,作者:书中枫叶,转载请注明原文链接:https://www.cnblogs.com/zy-mg/p/15144380.html

标签:两种,myEcharts,Echarts,vue,mounted,data,echarts
From: https://www.cnblogs.com/sexintercourse/p/17305541.html

相关文章

  • vue2 使用 swiper 轮播图效果
    vue2使用swiper轮播图效果Postedon 2021-04-0813:58  书中枫叶 阅读(1612) 评论(0)  编辑  收藏  举报上次更新:2022-03-0817:06第一步、先安装swiper插件[email protected]第二步、组件内引入swiper插件importSwi......
  • vue3 el-table-column 修改时间格式
    根据element文档说明,el-table中的el-table-column是可以使用formatter格式化时间的。  先添加绑定函数formatter <el-table-columnprop="createdTimeFormat":formatter="dateFormat"label="日期"width="170"></el-table-column> 新建格式......
  • vue 预览PDF、Docx、EXCEL文件
      <template><divclass="contentArea"><divclass="fileContainer"ref="fileDiv"v-if="$route.query.fileName.indexOf('docx')!==-1"></div><divclass="f......
  • vue生命周期(钩子函数)
    目录介绍介绍Vue实例有一个完整的生命周期,也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程,我们称这是Vue的生命周期。生命周期:vue实例从创建到销毁的过程。生命周期钩子:就是生命周期事件的别名而已钩子函数描述创建期间的......
  • ZR.Admin小改和VUE3版本体验
    前言孔乙己显出极高兴的样子,将两个指头的长指甲敲着柜台,点头说:“对呀,对呀!......回字有四样写法,你知道么?”大家好,我是44岁的大龄程序员码农阿峰。阿峰从事编程二十年了,虽然没有成为架构师,却也用过很多种架构。几年前开始研究JAVA企业级快速开发框架若依,后来发现了它的.net版本......
  • 使用vue3创建后台管理项目
    最后案例:    一:创建一个Vue应用打开控制台:npminitvue@latest输入你需要创建的项目名称,一路回车   下载需要的包,如下:"dependencies":{"@element-plus/icons-vue":"^2.1.0","axios":"^1.3.5","element-plus"......
  • 对于intend to do 和intend doing两种用法的解释
    ![[Pastedimage20230409205800.png]]![[Pastedimage20230409205816.png]]intendtodo“Intendtodo”意为“打算做某事”。通常,该短语的结构为“intendto”+动词原形。例如:Iintendtotravelaroundtheworldnextyear.(我打算明年环游世界。)Thecompanyinten......
  • 在vue中为vuecal组件中的一个按钮添加点击事件
    现在需要为一个按钮添加点击事件由于vuecal文档中没有该按钮的点击事件,所以考虑使用原生dom为其添加点击事件使用原生dom添加使用this.$nextTick+.onclickthis.$nextTick(()=>{ //获取对应的dom元素 varotest=document.getElementsByClassName("vuecal__arrowvueca......
  • vue2源码-二、对象响应式原理
    //循环对象进行一次劫持classObserver{constructor(value){this.walk()}walk(data){//重新定义属性Object.keys(data).forEach((key)=>defineReactive(data,key, data[key]))}}//属性劫持//对对象target,定义属性key,值为value//使用Object.definProperty重......
  • vue iview table实现动态自定义表头
    一、前言众所周知,iview中有一个表格组件Table,用于展示多条结构类似的数据。之前遇到过一个需求,要手动控制table的表头显示。就是假如table表格一共有10列数据,可以通过设置勾选,决定显示多少列二、代码为了代码的复用性,将配置页面单独抽成了组件,所以代码中会有组件之间传值父组件......