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. jquery append、prepend、before等等

    1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 复制代码代码如下: $("p").append("Some ...

  2. Django中更新多个对象数据与删除对象的方法

    更新多个对象 例如说我们现在想要将Apress Publisher的名称由原来的”Apress”更改为”Apress Publishing”.若使用save()方法,如: ? 1 2 3 >&g ...

  3. socket()函数介绍

    socket()函数介绍 socket函数介绍 函数原型 domain type protocol errno 示例 函数原型 socket()函数的原型如下,这个函数建立一个协议族为domain.协 ...

  4. box-shadow 边框样式

    如下 box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.1 ...

  5. PHP $_SERVER 祥细解读（有事例）

    为了看的更明白,添加上了事例 例如  'www.ceshiyuming.com/ceshi.php?p=123';Array(    [HOSTNAME] =>     [PATH] => ...

  6. Rect参数的简易理解方式

    以屏幕左上角为原点开始计算 向下 和 向右均为整数 new Rect(left, top, right, bottom) Rect参数的意思代表的是矩形的左上角的坐标(left.top)和右下角的坐标 ...

  7. bzoj1034 泡泡堂

    Description 第XXXX届NOI期间,为了加强各省选手之间的交流,组委会决定组织一场省际电子竞技大赛,每一个省的代表队由n名选手组成,比赛的项目是老少咸宜的网络游戏泡泡堂.每一场比赛前,对阵 ...

  8. 纯文本文件 numbers.txt, 里面的内容（包括方括号）如下所示

    from collections import OrderedDict import xlwt with open('student.txt','r') as f: number_list = jso ...

  9. 杂项：BugFree

    ylbtech-杂项:BugFree BugFree是借鉴微软的研发流程和Bug管理理念,使用PHP+MySQL独立写出的一个Bug管理系统.简单实用.免费并且开放源代码(遵循GNU GPL). 命名 ...

  10. Valgrind使用指南和错误分析

    Valgrind使用指南和错误分析 Valgrind是一个GPL的软件,用于Linux(For x86, amd64 and ppc32)程序的内存调试和代码剖析.你可以在它的环境中运行你的程序来监视 ...