1.  npm install echarts --save

2.  在main.js文件中

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3. 在展示的组建中
<template>
  <div id="main" style="width: 500px; height: 500px"></div>
</template>
<script>
export default {
  mounted() {
    //挂载实例
    this.dwa();
  },
  //定义一个方法
  methods: {
    dwa(){
      let echarts = require('echarts');
      let myChart = echarts.init(document.getElementById('main'));
      myChart.setOption({ title: { text: 'ECharts 入门示例' },
        tooltip: {},
        xAxis: {
          show:false,
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {
          show:false
        },
        series: [
            {
              name: 'a a ',
              type: 'pie',
              data: [20,1,3,4,5,6,7,8,9,10,11,12,13,14,15]
            }
        ]
      });
    }
  },
}
</script>

在vue中引入版本为"echarts": "^5.1.2"图表的更多相关文章

  1. vue中引入babel步骤

    vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...

  2. vue中引入mintui、vux重构简单的APP项目

    最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...

  3. vue中引入json数据,不用本地请求

    1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...

  4. vue中引入mui报Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them的错误

    在vue中引入mui的js文件的时候,报如下的错误: 那是因为我们在用webpack打包项目时默认的是严格模式,我们把严格模式去掉就ok了 第一步:npm install babel-plugin-t ...

  5. Vue中引入echarts。

    1.安装 在终端vue项目的文件夹下运行npm install echarts --save安装依赖 可以使用npm install echarts@("这里可以写版本号") -- ...

  6. Vue 中引入echarts

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

  7. Vue中引入TradingView制作K线图

    **前言: 本文使用的是1.10版本 , 可通过TradingView.version()查看当前版本. 附上开发文档地址:https://zlq4863947.gitbooks.i...** 一.修 ...

  8. vue中引入swiper(vue中的滑块组件vue-awesome-swiper)

    第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...

  9. Vue中引入bootstrap导致的CSS问题

    最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...

随机推荐

  1. 【重构】Bilibili UWP 客户端下载视频文件重命名 2.0

    代码已上传Github:https://github.com/zsy0216/BatchModifyBilibiliName 较 master 分支的改变: - 优化了重命名的代码,覆盖更全面,更准确 ...

  2. linux下系统时间和时钟时间

    linux中有关系统时间.时钟时间的命令: 1显示系统时间的命令 ># date 2显示时钟时间的命令 ># clock或hwclock 3系统时间与互联网同步的命令 ># ntpd ...

  3. 【动画消消乐】HTML+CSS 自定义加载动画 064(currentColor的妙用!)

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

  4. 《鸟哥Linux私房菜》 全套视频和PDF资料—— 老段带你学鸟哥Linux视频课程

    <鸟哥的Linux私房菜-基础篇-服务器篇(第三版)>学习Linux极为经典的入门资料,但是还是很多同学难以坚持系统的看完整本书,最终以放弃而告终. 为了帮助大家更容易入门Linux,老段 ...

  5. 关于java.lang.IllegalMonitorStateException异常说明(四)

    1.异常原因及解释 首先你要了解这个异常为什么会抛出,这个异常会在三种情况下抛出:1>当前线程不含有当前对象的锁资源的时候,调用obj.wait()方法;2>当前线程不含有当前对象的锁资源 ...

  6. Apache ActiveMQ(CVE-2016-3088)

    影响版本 Apache ActiveMQ 5.0.0-5.13.x 路径地址 http://192.168.49.2:8161/admin/test/systemProperties.jsp 该漏洞允 ...

  7. 就这?Spring 事务失效场景及解决方案

    小明:靓仔,我最近遇到了很邪门的事. 靓仔:哦?说来听听. 小明:上次看了你的文章<就这?一篇文章让你读懂 Spring 事务>,对事务有了详细的了解,但是在项目中还是遇到了问题,明明加了 ...

  8. SQL Server 行转列 列转行操作

    1.多行转成一行(并以','分开) 表数据如下图: 查询结果如下图: SQL查询脚本: SELECT addPer, house_code = (STUFF((SELECT ',' + house_c ...

  9. jdk的下载与安装教程

    最近在学逆向,就是要反编译人家的java代码,在这之前要先安装环境,下面是下载和安装JDK的教程: 1.JDK下载地址: http://www.oracle.com/technetwork/java/ ...

  10. 【SpringCloud技术专题】「原生态Fegin」打开Fegin之RPC技术的开端,你会使用原生态的Fegin吗?(上)

    前提介绍 Feign是SpringCloud中服务消费端的调用框架,通常与ribbon,hystrix等组合使用. 由于遗留原因,某些项目中,整个系统并不是SpringCloud项目,甚至不是Spri ...