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. BAT 批处理脚本教程

    第一章 批处理基础第一节 常用批处理内部命令简介 批处理定义:顾名思义,批处理文件是将一系列命令按一定的顺序集合为一个可执行的文本文件,其扩展名为BAT或者CMD.这些命令统称批处理命令.小知识:可以 ...

  2. JVM监控

    jconsole 说明: 首先JConsole这个是JDK里面自带的工具  在JAVA_HOME/bin目录下,今天主要测试远程监控JVM 第一步:设置好需要远程机器的Tomcat 修改Tomcat下 ...

  3. 关于事件委托的整理 ，另附bind,live,delegate,on区别

    随着DOM结构的复杂化和Ajax等动态脚本技术的运用导致如今的js界里最火热的一项技术应该是‘事件委托(event delegation)’了,什么是事件委托呢?小七给你娓娓道来,说白了就是想给子元素 ...

  4. jsp 知识点

    在JSP中很多对象是不需要创建的,如out.session等.它们可以直接使用. <% out.println(session.getId()); %>

  5. yii2 笔记（1）

    1.js文件加载顺序问题 在视图中引用js文件的时候,使用到jquery会报错,因为自定义的js文件在jquery之前被引入了. 由于jquery,bootstrap是在AppAsset中全局引入的, ...

  6. 洛谷 4389 付公主的背包——多项式求ln、exp

    题目:https://www.luogu.org/problemnew/show/P4389 关于泰勒展开: https://blog.csdn.net/SoHardToNamed/article/d ...

  7. go test 初始化--- TestMain的使用

    go test 功能,提高了开发和测试的效率. 有时会遇到这样的场景: 进行测试之前需要初始化操作(例如打开连接),测试结束后,需要做清理工作(例如关闭连接)等等.这个时候就可以使用TestMain( ...

  8. 关于Jquery 插件开发，写的很清楚了。。。

    转自:http://blog.jobbole.com/30550/ 本文由 伯乐在线 - 戴嘉华 翻译.未经许可,禁止转载!英文出处:Extraordinarythoughts.欢迎加入翻译小组. 如 ...

  9. [模板] Miller_Rabin素数判断代码实现存档

    就是....存存代码吧. Miller_Rabin的最核心部分在于二次探测定理和费马小定理.后者在同余/逆元的题目里面或多或少都有提及吧.....前者也很简单. 总而言之,Miller_Rabin不算 ...

  10. windows下elasticsearch配置及spring boot 简单demod的 整合

    学习过程: elasticsearch 下载安装 elasticsearch-head 安装 spring boot 下elasticsearch的配置 使用ElasticsearchReposito ...