0.执行教程 https://www.cnblogs.com/goloving/p/8654176.html
1.在index 中创建 div

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>app</title>

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

    <div id="ecarts1" style="width:200px;height:200px" ></div>

  </body>

</html>

2.在组件中引入 echarts
　　

<template>

  <div>

    <HelloWorld></HelloWorld>

    <ButtonIvew></ButtonIvew>

  </div>

</template>

<script>

import HelloWorld from "./components/HelloWorld";

import ButtonIvew from "./components/button";

export default {

  components: {

    HelloWorld,

    ButtonIvew

  },

  name: "App"

};

var echarts = require("echarts");

require('echarts/chart/line');

require('echarts/chart/bar');

var option = {

  tooltip: {

      trigger: 'axis'

  },

  legend: {

      data: ['蒸发量', '降水量']

  },

  toolbox: {

      show: true,

      feature: {

          mark: {

              show: true

          },

          dataView: {

              show: true,

              readOnly: false

          },

          magicType: {

              show: true,

              type: ['line', 'bar']

          },

          restore: {

              show: true

          },

          saveAsImage: {

              show: true

          }

      }

  },

  calculable: true,

  xAxis: [{

      type: 'category',

      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

  }],

  yAxis: [{

      type: 'value',

      splitArea: {

          show: true

      }

  }],

  series: [{

      name: '蒸发量',

      type: 'bar',

      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]

  }, {

      name: '降水量',

      type: 'bar',

      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]

  }]

};

var myChart = echarts.init(document.getElementById('ecarts1'));

myChart.setOption(option);

</script>

<style>

#app {

  text-align: center;

  margin: 60px;

}

</style>

　　
3.在组件构建完成挂载后执行 生成echarts动作

vue-webpack 引入echarts 注意事项的更多相关文章

  1. Vue中引入echarts。

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

  2. Vue 中引入echarts

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

  3. vue+webpack 引入jquery

    1 首先 cnpm install jquery:这时jquery已经安装成功,可以使用jquery,但是jquery不是全局的,需要在使用的组件中引入jquery,jquery的路径是jquery/ ...

  4. vue webpack 引入iview iview内部文件报语法错误

    错误如下: 是因为 es6 语法没有成功转化 因为 我的项目是别人做好的已经部署的项目 ,但是用到的是es2015  配置es2015并不起作用 是因为es2015已经过期了 安装的时候回有类似下面的 ...

  5. 在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作

    文章目录 1.实现的效果 2.前端代码 3.后端controller代码 4.servie层代码 5.serviceImpl层代码 6.mapper层代码 7.xml中的sql语句 8.遇到的问题 8 ...

  6. vue按需引入/全局引入echarts

    npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...

  7. 在vue中调用echarts中的地图散点图~

    首先!当然是在vue中引入echarts! 命令行  npm install echarts --save 在main.js文件中里引入        import echarts from 'ech ...

  8. vue引入echarts、找不到的图表引入方法、图表中的点击事件

    1.在vue-cli项目中添加webpack配置,本文引入的最新版本.在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维 ...

  9. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

随机推荐

  1. ActiveMQ消息持久化存储策略

    ActiveMQ的内核是Java编写的,也就是说如果服务端没有Java运行环境ActiveMQ是无法运行的.ActiveMQ启动时,启动脚本使用wrapper包装器来启动JVM.JVM相关的配置信息在 ...

  2. memcache 和 memcached 区别

    区别用一句话表达:Memcached (字母d可以理解为daemon)是一个服务(运行在服务器上的程序,监听某个端口),Memcache 是 一套访问Memcached的api. memcache客户 ...

  3. JZ2440 裸机驱动 第6章 存储控制器

    本章目标:     了解S3C2410/S3C2440地址空间的布局     掌握如何通过总线形式访问扩展的外设,比如内存.NOR Flash.网卡等 ························ ...

  4. [转]Nginx负载均衡原理初解

    什么是负载均衡 我们知道单台服务器的性能是有上限的,当流量很大时,就需要使用多台服务器来共同提供服务,这就是所谓的集群. 负载均衡服务器,就是用来把经过它的流量,按照某种方法,分配到集群中的各台服务器 ...

  5. dede 添加自定义函数

    include/extend.func.php里添加函数 function GetTopTags($str){$dsql = new Dedesql(false);$row = $dsql->G ...

  6. Eclipse设置相同变量背景色高亮显示

    在Eclipse中,鼠标选中或者光标移动到java类的变量名时,相同变量会被标识显示(设置背景色高亮), 并且侧边滚动条会标出变量的位置, 查找变量十分方便. 1.相同变量标识高亮显示: Window ...

  7. 使用axis2的wsdl2java把wsdl生成java文件

    原文地址:http://blog.csdn.net/walkcode/article/details/7661674 有时在我们的开发中可能会有这种情况就是你要使用webservice但是对方没有给你 ...

  8. 基于Hadoop开发网络云盘系统架构设计方案第一稿

    引言 云计算技术的发展,各种网络云盘技术如雨后春笋,层出不穷,百度.新浪.网易都推出了自己的云盘系统,本文基于开源框架Hadoop设计实现了一套自己的网络云盘系统,方案为初步设计方案,不断完善中. 一 ...

  9. C/C++基础----表达式

    1 基本概念 类型转换,小整型通常会被提升. 运算符重载,运算对象的个数.运算符的优先级和结合律都是无法改变的. 左值右值,对象被用做右值时,使用的是对象的值(内容):用做左值时,使用的是对象的身份( ...

  10. Qt5布局管理（三）——QStackedWidget堆栈窗口类

    转载:LeeHDsniper 实例效果如下图: 如上图,堆栈窗口左半部分是一个QListWidget对象,右半部分是分别是三个标签.通过点击左边不同的项目,可以使得右边的Lable进行切换. 具体的结 ...