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. NOSQL之REDIS

    Redis是NoSQL中比较常典型的一个非关系型数据库,在日常工作中也是最为常见的.Redis是一个由C语言编写的开源的.遵守BSD协议.支持网络.可基于内存亦可持久化的日志型.Key-Value数据 ...

  2. Linux下编译安装nginx并且监控

    一.安装Nginx 使用源码编译安装,包括具体的编译参数信息. 正式开始前,编译环境gcc g++ 开发库之类的需要提前装好. 安装make: yum -y install gcc automake ...

  3. 合泰 HOLTEK 单片机中 I/T O/T 什么意思？

    合泰 HOLTEK 单片机中 I/T O/T 什么意思?

  4. MSCRM 2011中过滤化查询的实现方法和禁用选择视图

    MS CRM 2011中过滤化查询的实现方法 使用过滤化查询,可以实现根据表单上的其他信息作为搜索条件,限制Lookup查找框中的搜索结果数量的目的. 在讲解具体的实现方法之前,先设定一个应用场景: ...

  5. [转]csharp:Microsoft.Ink 手写识别（HandWriting Recognition）

    原贴:http://www.cnblogs.com/geovindu/p/3702427.html 下載: //Microsoft Windows XP Tablet PC Edition 2005 ...

  6. springMVC参数绑定JSON类型的数据

    需求就是: 现在保存一个Student,并且保存Student的friend,一个student会有多个朋友,这里要传递到后台的参数是: var friends = new Array(); var ...

  7. excel 怎么添加超链接

    1.只能对单元格添加超链接 2.如果要对单元格里面个别字做成超链接,可以使用图形工具,设置一个图形在里面,对这个图形做超链接 参考:https://jingyan.baidu.com/article/ ...

  8. Jquery判断IE6等浏览器的代码

    这好像是由几篇代码接在一起的,原文均来自网络,不记得出处了~ jquery中利用navigator.userAgent.indexOf来判断浏览器类型,并进行了一下处理,如果不想使用jquery,稍为 ...

  9. RAID磁盘阵列的原理与搭建

    学习导图 RAID-0结构关系图 RAID-1结构关系图 RAID-5:条带+分布校验(三块磁盘以上) RAID-10:镜像+条带(四块磁盘以上) RAID-0 添加两块硬盘,分别为磁盘1.磁盘2.最 ...

  10. 原创）CentOS6.4下安装xampp（一定要在linux上下载）

    一.xampp下载地址: http://sourceforge.net/projects/xampp/files/XAMPP%20Linux/1.8.3/ 二.我下载的是xampp-linux-x64 ...