首页 > 其他分享 >vue里面echarts的使用

vue里面echarts的使用

时间:2022-10-22 14:44:28浏览次数:81  
标签:vue 里面 option echarts Apache mounted id

一、先安装echarts--Handbook - Apache ECharts;

二、在min的文件中引入

Vue.prototype.$echarts = echarts;
import * as echarts from 'echarts';

三、在html里面增加一个div设置一个id

<template>
  <div>
    <div id="san" style="width: 20vw; height: 20vh"></div>
  </div>
</template>

四、在methods声明一个方法获取到id,然后去Examples - Apache EChart找一个你合适的模板替换掉代码里的option,在去mounted里面调一下。

tubiao() {
      var myChart = this.$echarts.init(document.getElementById("san"));
      let option ={}
       option && myChart.setOption(option);
      }
  mounted() {
    this.tubiao();
  },

 

标签:vue,里面,option,echarts,Apache,mounted,id
From: https://www.cnblogs.com/Qinhr/p/16816052.html

相关文章

  • vue-router
    入门1.前言router路由应为vue是单页应用不会有那么多html让我们跳转所有要使用路由做页面的跳转Vue路由允许我们通过不同的URL访问不同的内容。通过Vue可以实......
  • vue中工作总结
    1.vue中数据向下传递时,无法使用@close方法清除原因:传递的时候需要进行一波深拷贝方法:JSON.parse(JSON.stringify(obj))2.表格选择的时候无法再次点击取消使用elementui的时......
  • Vue 笔记6 模板分离
                   ......
  • Vue3 系统入门与项目实战2022克鲁斯卡尔算法
    ​Vue3系统入门与项目实战2022克鲁斯卡尔算法计算机的记忆金字塔1.局部性原则局部性原则是制定存储系统数据管理策略的理论基础。我们可以从两个维度来理解它:1.时间局......
  • vue3中$attrs的变化与inheritAttrs的使用
    在vue3中的$attrs的变化$listeners已被删除合并到$attrs中。$attrs现在包括class和style属性。也就是说在vue3中$listeners不存在了。vue2中$listeners是单独存在的。......
  • vue.js中实现阻止事件冒泡
    当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的事件,可以在子元素事件中添加stop来阻止事件冒泡。 .stop是阻止冒泡行为,不让当前元素的......
  • Vue 前端配置跨域
    目录Vue前端配置跨域添加vue.config.js文件修改main.js好文推荐Vue前端配置跨域Nginx、后端网关层已经全部配置跨域,VUE前端仍然会偶发性发生跨域问题,故此决定,前端也进......
  • 【前端】学习了一段时间的vue,总结一下Vue书写规范
    (学习了一段时间的vue,总结一下Vue书写规范)命名规范在团体开发项目中,为了团队所有成员书写可维护的代码,而不是一次性的代码,让团队当中其他人看你的代码能一目了然,甚至过......
  • 解决vue请求springBoot项目时跨域问题
    由于浏览器同源策略的限制,如果请求url的协议、域名、端口号中有一项不同,就会产生跨域问题当我们在本地开始前后端分离项目时,必然会启动不用的端口,所以就会发生跨域问题比......
  • 前端Vue2-Day56
    消息订阅与发布pubsub:实现任意组件间通信使用步骤:①安装pubsub-js:npmipubsub-js②引入:importpubsubfrom'pubsub-js'③订阅消息:使用pubsub自带的subscribe方法......