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. SLF4J日志桥接的应用

    最近在给公司的测试部门开发一套自动化测试框架,为了是框架产生的测试报告更易于分析,我考虑将每一个用例与运行过程中产生的日志相关联,为了实现这样的效果,首先就需要统一项目的日志输出,那么具体怎么做呢? ...

  2. Altium Designer 21.x中文版安装破解教程

    Altium Designer 21.x是一款优秀的PCB设计工具,可以原理图设计.电路仿真.PCB绘制编辑.拓扑逻辑自动布线.信号完整性分析和设计输出等功能,为设计者提供了全新的设计解决方案,提高设 ...

  3. 1.4matlab矩阵的表示

    1.4matlab矩阵的表示 矩阵的建立 利用直接输入法建立矩阵:将矩阵的元素用中括号括起来,按矩阵的顺序输入各元素,同一行的各元素之间用逗号或空格分隔,不同行的元素之间用分号分隔. 利用已建立好的矩 ...

  4. tomcat与springmvc 结合 之---第18篇 StandContext容器和SpringMVC的监听器的模型

    writedby张艳涛 如何使用tomcat的监听器 public class BootStrap_ex06 { public static void main(String[] args) { Ht ...

  5. vsCode开发flutter项目

    Visual Studio Code 安装: 下载链接:https://code.visualstudio.com/ 下载完成后根据步骤自行安装.     使用vsCode开发flutter项目需要部 ...

  6. BSTestRunner增加历史执行记录展示和重试功能

    之前对于用例的失败重试,和用例的历史测试记录存储展示做了很多的描述呢,但是都是基于各个项目呢,不方便使用,为了更好的使用,我们对这里进行抽离,抽离出来一个单独的模块,集成到BSTestRunner中, ...

  7. 接口管理效率神器Apifox

    前言 你是一个测试,你们团队目前开发模式是前后端分离. 某一天,版本V1.0接口评审完,发布在了swagger上,前后端各自进行开发.此时你根据接口文档将新接口迁移到JMeter上,然后开始编写接口测 ...

  8. Android面试中多说这么一句话,薪水直接涨5k

    小鱼同学最近很难受,明明获得了人人羡慕的大厂Offer,走在路上都能被熟人祝贺,学弟学妹争着抢着求他进行经验分享. 但有件事一直让他很介意.其实这件事起因很简单,是关于这份Offer的薪资问题,面试的 ...

  9. 线程强制执行_join

    线程强制执行_join Join合并线程,待此线程执行完成后,再执行其他线程,其他线程阻塞 可以想象为插队 测试案例: package multithreading; // 测试Join方法 // 想 ...

  10. PLSQL编程及存储过程的创建

    一.PLSQL的初步介绍 PLSQL是使sql具有处理过程的能力,可以分为三个部分:声明部分.可执行部分.异常处理部分 1.如何使用PLSQL打印Hello World! 在sqlplus里中打印   ...