vue-webpack 引入echarts 注意事项
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 注意事项的更多相关文章
- Vue中引入echarts。
1.安装 在终端vue项目的文件夹下运行npm install echarts --save安装依赖 可以使用npm install echarts@("这里可以写版本号") -- ...
- Vue 中引入echarts
安装依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org ...
- vue+webpack 引入jquery
1 首先 cnpm install jquery:这时jquery已经安装成功,可以使用jquery,但是jquery不是全局的,需要在使用的组件中引入jquery,jquery的路径是jquery/ ...
- vue webpack 引入iview iview内部文件报语法错误
错误如下: 是因为 es6 语法没有成功转化 因为 我的项目是别人做好的已经部署的项目 ,但是用到的是es2015 配置es2015并不起作用 是因为es2015已经过期了 安装的时候回有类似下面的 ...
- 在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
文章目录 1.实现的效果 2.前端代码 3.后端controller代码 4.servie层代码 5.serviceImpl层代码 6.mapper层代码 7.xml中的sql语句 8.遇到的问题 8 ...
- vue按需引入/全局引入echarts
npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...
- 在vue中调用echarts中的地图散点图~
首先!当然是在vue中引入echarts! 命令行 npm install echarts --save 在main.js文件中里引入 import echarts from 'ech ...
- vue引入echarts、找不到的图表引入方法、图表中的点击事件
1.在vue-cli项目中添加webpack配置,本文引入的最新版本.在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维 ...
- vue webpack打包后 iconfont引入路径不对
vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...
随机推荐
- 六、物理数据模型(PDM逆向工程)
物理数据模型PDM 物理数据模型(Physical Data Model,PDM):在数据库的逻辑结构设计好之后,就需要完成其物理设计,PDM就是为实现这一目的而设计的. 物理数据模型是以常用的D ...
- 整理开源协议问题 GPL APACHE
整理开源协议问题 GPL APACHE APACHE 和 GPL 互相不兼容. APACHE 不可以使用 GPL 的代码. 但是 APACHE 可以调用 GPL 组件的接口. 比如 Linux 和 A ...
- SpringMVC Controller 介绍及常用注解
摘要: @Controller.@RequestMapping(属性:value.params .method.headers).@PathVariable.@RequestParam.@Cookie ...
- Hadoop 和 Spark 的关系
Hadoop实质上是一个分布式数据基础设施: 它将巨大的数据集分派到一个由普通计算机组成的集群中的多个节点进行存储,意味着您不需要购买和维护昂贵的服务器硬件. 同时,Hadoop还会索引和跟踪这些数据 ...
- CentOS6.8 x64+Nginx1.3.8/Apache-httpd 2.4.3+PHP5.4.8(php-fpm)+MySQL5.5.28+CoreSeek4.1源码编译安装
系统为CentOS6.8 x64服务器版精简安装. 准备工作 部署安装目录 /usr/local/* /var/lib/* /var/lib64/* 下载源文件 #cd /usr/local/src ...
- 修改Nginx的header伪装服务器
有时候为了伪装自己的真实服务器环境.不像让对方知道自己的webserver真实环境,就不得不修改我们的webserer软件了!今天看了一下baidu.com的webserver感觉像是nginx修改的 ...
- chrome 45以上flash被拦截的一种可能解决方案
chrome 45以上不自动播放"非必要"flash的一种可能解决方案chrome 45以上flash被拦截的一种可能解决方案 问题 1.chrome 45以上(包含45)版本默认 ...
- 消息中间件 ActiveMQ的简单使用
一.AactiveMQ的下载和安装 1. 下载ActiveMQ 地址:http://activemq.apache.org/activemq-5152-release.html 我这里下载的是wind ...
- MySql检测阻塞,锁等待sql
------------ 1分钟内产生binlog大小计算 select @a1:=VARIABLE_VALUE as a1from information_schema.GLOBAL_STATUSw ...
- PHP中文件类型 文件属性 路径以及 文件相关的函数
一: 文件类型判断: 1.is_dir() 判断是不是目录 2.is_file() 判断是不是文件 3.is_executable() 判断是不是可执行文件 4.is_readable() 判断是 ...