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. vlc+flv.js 摄像头 H5 直播

    背景 业务需求:用最短的时间搞定摄像头直播到Web页面.因为没有过这方面经验,所以走了很多弯路,其实也不算弯路吧,大部分时间花在学习基础概念,寻找快速方案中.惯性思维想当然的以为找组件,配地址就能搞定 ...

  2. Hive——基本DML语句

    Hive--基本DML语句 DML:Data Manipulation Language(数据操作语言,与关系型数据库相似) 官方手册:https://cwiki.apache.org/conflue ...

  3. IO流之节点流(字节流)

    节点流可以分为:字节节点流和字符节点流 数据源直接到程序的成为节点流(低级流) 字节流 输入流----InputStream InputStream 是输入流的抽象父类,若创建对象,需new它的子类 ...

  4. 自动化测试(1)selenium+python+chrome 连接测试

    环境准备: python版本:3.8.4 开发工具:pycharm 使用chrome和对应的webdriver http://npm.taobao.org/mirrors/chromedriver/ ...

  5. python errno库与socket.connect_ex()方法的结合使用

    前言:一般socket链接会首选connect方法,该方法会一直尝试链接.那么今天展示下connect_ex()方法,该方法如果链接成功会返回0,失败会返回errno库中的errorcode中的key ...

  6. py3射击小游戏

    关于py3面向对象的小Demo,欢迎 交流. class Person(object):#声明人类 def __init__(self,name): self.name = name self.gun ...

  7. URL 参数为sql 有空格 的解决办法

    var strsql=" select e.* from es_doc_main e where 1=1" +" and e.doccode='"+prtNo+ ...

  8. Apache Flink jobmanager/logs路径遍历CVE-2020-17519

    影响版本 1.11.0 1.11.1 1.11.2 poc http://192.168.49.2:8081/jobmanager/logs/..%252f..%252f..%252f..%252f. ...

  9. D. 旅游景点 Tourist Attractions 状压DP

    题目描述 FGD想从成都去上海旅游.在旅途中他希望经过一些城市并在那里欣赏风景,品尝风味小吃或者做其他的有趣的事情.经过这些城市的顺序不是完全随意的,比如说FGD 不希望在刚吃过一顿大餐之后立刻去下一 ...

  10. 记一次 .NET 某智慧水厂API 非托管内存泄漏分析

    一:背景 1. 讲故事 七月底的时候有位朋友在wx上找到我,说他的程序内存占用8G,托管才占用1.5G,询问剩下的内存哪里去了?截图如下: 从求助内容看,这位朋友真的太客气了,动不动就谈钱,真伤感情, ...