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. kubespray-2.14.2安装kubernetes-1.18.10(ubuntu-20.04.1)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  2. HTML5-CSS(三)

    一.CSS  盒模型 1.元素尺寸:CSS 盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下 //设置元素尺寸 div { width: 200px;heig ...

  3. HTML5-CSS(一)

    一.创建 CSS 样式表有三种方式 1. 元素内嵌样式<p style="color:red;font-size:50px;">这是一段文本</p>解释:即 ...

  4. POJ1934 Trip 题解

    LCS 模板,但要输出具体方案,这就很毒瘤了. 神奇的预处理:fa[i][j]表示在 \(a\) 串的前 \(i\) 个字符中,字母表第 \(j\) 个字母最晚出现的位置,fb[i][j]同理. 这样 ...

  5. 图解java多线程设计模式之一一synchronized实例方法体

    synchronized实例方法体和synchronized代码块 synchronied void method(){ ....... } 这个等同于下面将方法体用synchronized(this ...

  6. 修改Eureka的metadata脚本

    最近研究了一下Spring Cloud的灰度发布, 发现方法真是多. 这里先提供一个修改Eureka注册中心里的instance实例的metadata的脚本, 可以方便地用来测试效果. 使用举例: s ...

  7. DC-8 靶机渗透测试

    DC-8 渗透测试 冲冲冲 ,好好学习 . 核心:cms上传添加存在漏洞组件,利用该组件getshell 操作机:kali 172.66.66.129 靶机:DC-4 172.66.66.137 网络 ...

  8. DNS反向解析,主从服务器,分离解析(内外网)

    目录 实验一:DNS反向解析 1.安装bind 2.查找配置文件路径 3.配置/etc/named.conf主配置文件 4.修改/etc/named.rfc1912.zones区域配置文件(复制两个) ...

  9. Vulhub-DC-1靶场

    前言: DC-1靶场是Vulhub系一款渗透测试的实战靶场,拥有五个Flag.本篇博客讲述了如何拿去这五个Flag,并详细描述其中的注意点. 实验环境: 虚拟机环境:virtualbox 虚拟机1:D ...

  10. 爱了,字节跳动大神最佳整理:582页Android NDK七大模块学习宝典,理论与实践

    前言 时至今日,短视频App可谓是如日中天,一片兴兴向荣.随着短视频的兴起,音视频开发也越来越受到重视,而且薪资水涨船高,以一线城市为例,音视频工程开发的薪资比Android应用层开发高出40%. 但 ...