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. Junit测试用例配置Log4j

    用Junit测试非常方便,但有时我们想要看日志来方便排除,使用spring+log4j时,用Junit测试看日志很多人都不太会,即如何将Junit与log4j进行整合. 我也是研究了半天,才终于找到了 ...

  2. web自动化测试(2):选择selenium优势?与PhantomJS/QTP/Monkey对比

    上篇 <web自动化测试(1):再谈UI发展史与UI.功能自动化测试>,自动化测试工具众多, PC端常用的功能自动化测试工具 Selenium:开源工具集,用于回归功能测试或者系统用例说明 ...

  3. Jmeter 学习笔记 1 - Logic Controller -组织执行场景

    using this website to practice performance testing: http://advantageonlineshopping.com/#/ Jemeter ho ...

  4. sql server 查看数据库配置等信息(字符集,编码格式,版本号...)

    select SERVERPROPERTY(N'edition') as Edition --数据版本,如企业版.开发版等,SERVERPROPERTY(N'collation') as Collat ...

  5. java构造器级简单内存分析

    java构造器的使用(基础篇) 构造方法也叫构造器,是创建对象时执行的特殊方法,一般用于初始化新对象的属性. 基本定义语法: 访问控制符 构造方法名([参数列表]){ 方法体 } 注:"访问 ...

  6. 资源适配【eg: values-sw600dp的命名和drawable-400dpi的命名】

    通过getResources().getConfiguration().smallestScreenWidthDp获取即可 这篇文章讲了values-sw的适配: https://blog.csdn. ...

  7. icmp介绍以及arp攻击

    目录 一.ip数据包格式 二.ICMP协议介绍 三.ARP协议介绍 四.ARP攻击原理 一.ip数据包格式 网络层的功能: 定义了基于ip协议的逻辑地址 连接不同的媒介类型 选择是数据通过网络的最佳途 ...

  8. 通读BadCode

    简介 就是旋哥的BadCode系列,这次好好通读下,然后我在旋哥的注释上又加了一些,函数原型等. 项目地址:https://github.com/Rvn0xsy/BadCode 第一课 主要介绍了下c ...

  9. 堪称教科书级别的Android音视频入门进阶学习手册,开源分享!

    概述 随着整个互联网的崛起,数据传递的形式也在不断升级变化,总的流行趋势如下: 纯文本的短信,QQ -> 空间,微博,朋友圈的图片文字结合 -> 微信语音 -> 各大直播软件 -&g ...

  10. MySQL Replication Thread States

    1.主节点线程状态(Replication Master Thread States): Finished reading one binlog; switching to next binlog 线 ...