vue集成echarts-程序员宅基地

技术标签: VUE  vue.js  

1、安装echarts插件

     npm install echarts --save

     注意:安装后可能会出现echarts加载报"property 'init' of undefined",网上很多解决办法,我这边是降低echarts安装版本解决的即上面的命令替换为 npm install [email protected] --save

2、全局配置main.js 

      import echarts from 'echarts';
      Vue.prototype.$echarts=echarts;
      Vue.use(echarts)

3、页面使用      

     <template>
           <div id="echartsCont" style="width:100%;height:260px"></div>
     </template>
     <script>
     export default {
       name: "RightPanel",
       mounted() {
         this.drawEcharts();//加载图表
       },
       methods: {
         drawEcharts() {
           //初始化echarts实例
           let echartsDiv = this.$echarts.init(document.getElementById("echartsCont"));
           // 绘制图表
           echartsDiv.setOption(echarts图表的option带{}对象丢进来即可);
         }
       }
     }
     </script>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_22472619/article/details/121742441

智能推荐

(最新最详细)安装ubuntu18.04-程序员宅基地

文章浏览阅读2w次,点赞4次,收藏91次。目录1. window10中下载ubuntu镜像2. 制作U盘启动盘3. Ubuntu 分配硬盘空间1. window10中下载ubuntu镜像下载地址2. 制作U盘启动盘安装制作工具:UltraISO(点我下载),下载完成后安装插入用来做启动盘的U盘(最好是usb3.0接口,16GB或以上),并清空里面的文件打开安装好的UltraISO,点击继续试用按钮工作界面进入工作界面后,点击菜单栏文件(F),在弹出的选项卡里点击打开在弹出的文件选择对话框中找到下载好的 Ubuntu18.04._ubuntu18.04

Toad报“No valid Oracle Client found”错-程序员宅基地

文章浏览阅读203次。2019独角兽企业重金招聘Python工程师标准>>> ..._toad no valid oracle client

MySQL数据库入侵及防御方法-程序员宅基地

文章浏览阅读521次。来自:http://blog.51cto.com/simeon/1981572作者介绍陈小兵,高级工程师,具有丰富的信息系统项目经验及18年以上网络安全经验,现主要从事网络安全及数据库技术研究工作。《黑客攻防及实战案例解析》《Web渗透及实战案例解析》《安全之路-Web渗透及实战案例解析第二版》《黑客攻防实战加密与解密》《网络攻防实战研究:漏洞利用与提权》作者,在国内多本学术期..._mysql 5.0.16入侵

SQL Server SSMS历史版本下载地址-程序员宅基地

文章浏览阅读135次。https://learn.microsoft.com/zh-cn/sql/ssms/release-notes-ssms?view=sql-server-ver16#previous-ssms-releases_sql server历史版本哪儿下

【狂神JAVA】MyBatis笔记_jdk1.7的mybatis-程序员宅基地

文章浏览阅读2.5k次。简介自学的【狂神JAVA】MyBatis分享自写源码和笔记,希望对大家有帮助本人配置jdk13.0.2 (jdk1.7以上均可)Maven 3.6.3MySQL 5.7.23 (mysql5.6以上均可)1. 配置官网文档: https://mybatis.org/mybatis-3/zh/getting-started.htmlpom.xml<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://_jdk1.7的mybatis

学习笔记---分布式调度之xxlJob调度中心的启动源码解析_xxl 调度失败:执行器地址为空-程序员宅基地

文章浏览阅读913次。调度中心的代码启动源码是从:XxlJobAdminConfig 入口;直接进入: xxlJobScheduler.init();第一个: initI18n() 处理国际化;第二个:JobRegistryMonitorHelper.getInstance().start(); 创建启动后台线程来维护在线的执行器组下的机器列表,从上篇学习笔记—分布式调度之xxlJob执行器的启动源码解析可以..._xxl 调度失败:执行器地址为空

随便推点

排序算法-堆积树排序法(HeapSort)-程序员宅基地

文章浏览阅读731次。堆积树排序法是选择排序法的改进版,可以减少在选择排序法中的比较次数,进而减少排序时间。堆积排序法用到了二叉树的技巧,是利用堆积树来完成排序的。堆积树是一种特殊的二叉树,可分为最大堆积树和最小堆积树两种。

Hadoop调优第一篇_hadoop_namenode_opts-程序员宅基地

文章浏览阅读917次。1.hdfs核心参数——回收站设置第一步,在调优前我们需要对namenode与datanode的内存配置进行参数化设置。通过hadoop-env.sh查看namenode与datdanode的具体参数。相关参数设置如下export HDFS_NAMENODE_OPTS=”-Dhadoop.security.logger=INFO,RFAS -Xmx1024m”export HDFS_DATANODE_OPTS=”-Dhadoop.security.logger=ERROR,RFAS -Xmx10_hadoop_namenode_opts

Studio 3T for MongoDB 激活破解脚本_studio 3tjihuoma-程序员宅基地

文章浏览阅读1.9w次,点赞2次,收藏27次。Studio 3T试用期过了不能使用,网上未搜索到相对应的激活码,可以选择重置使用时间继续使用。_studio 3tjihuoma

数据结构实验5《基于哈夫曼树的数据压缩》_基于哈夫曼树的数据压缩算法c语言-程序员宅基地

文章浏览阅读2k次,点赞4次,收藏25次。(visual studio 2019可运行)输入及输出要求见《数据结构C语言(第二版)》严蔚敏版【本文仅用于啥都看不懂还想交作业选手】#include<iostream>#include<map>#include<string>#include<stdio.h>#include<memory.h>using namespace std;typedef struct{ char c; int weight; in_基于哈夫曼树的数据压缩算法c语言

Teams Bot App 代码解析_adaptivecards.declare<datainterface>(rawlearncard)-程序员宅基地

文章浏览阅读1w次。Teams Bot App 代码解析_adaptivecards.declare(rawlearncard).render(this.likecountobj)

Unity UGUI(三)RawImage(原始图像)_unity原始图像-程序员宅基地

文章浏览阅读2.5k次。RawImage(Script)Texture 纹理 要显示的图片,注意:图片类型可以是任何类型 Color 颜色 图片的主颜色 Material 材质 渲染材质 Raycast Target 光线投射目标 是否可接收射线碰撞事件检测 UV Rect UV矩形 显示效果:X、Y属性用于控制纹理左右..._unity原始图像