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. 如何彻底卸载Jenkins（Windows版本）

    起因: 最近在做持续集成测试过程中遇到一个问题,之前部署的Jenkins管理员密码忘了之后无法登陆,而且删除掉tomcat下webapps文件夹中的Jenkins目录后,再次安装Jenkins后相关的 ...

  2. 二叉搜索树的第k大的节点

    题目 给定一颗二叉搜索树,请找出其中的第k大的结点. 思路 如果中序遍历一棵二叉搜索树,遍历序列的数值则是递增排序,因此只需中序遍历一个二叉搜索树即可. #include <iostream&g ...

  3. 浏览器的自动翻译会影响 JS 逻辑

    有人在 QQ 群里反馈,官方注册后跳转时出现 Bug. 收到群友非常有用的资讯,这是因为浏览器的自动翻译功能引起的. 11:04:21[潜水]Better Command 2017/12/30 11: ...

  4. async（await）知识点

    async 函数是 Generator 函数的语法糖. async 函数对 Generator 函数的改进体现在: async 内置执行器. Generator 函数的执行必须靠执行器,需要调用 ne ...

  5. maven 指定 jdk 版本

    方法1:直接修改 本地  settings.xml 文件 <profiles>  </profiles> 之间加入 下面的 <profile> <id> ...

  6. Server对象，HttpServerUtility类，获取服务器信息

    在Asp.net WebForm中,Server对象是HttpServerUtility类的实例.看下图: 而在Asp.net MVC中,Server对象是HttpServerUtilityBase对 ...

  7. angularJS自定义服务的几种方式

    在angularJS中定义服务共有四种常见的方式:factory,service,provider,constant,value 使用形式的不同: 1)factory以返回对象的形式定义服务: mya ...

  8. Maven 生成项目站点

    Maven 不仅仅时一个自动化构建工具和一个依赖管理工具,他还能够帮助聚合项目信息,促进团队间的交流,POM 可以包含各种项目信息,如项目描述.版本控制系统地址.缺陷跟踪系统地址.许可证信息.开发者信 ...

  9. centos7下svn的安装与配置

    1.环境 centos7 2.安装svnyum -y install subversion 3.配置 建立版本库目录mkdir /www/svndata svnserve -d -r /www/svn ...

  10. 关于Spring IOC (DI-依赖注入)

    <Spring入门经典>这本书无论对于初学者或者有经验的工程师还是很值一看的,最近花了点时间回顾了Spring的内容,在此顺带记录一下,本篇主要与spring IOC相关 ,这篇博文适合初 ...