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 ...
随机推荐
- ActiveMQ集群方案
集群方案主要为了解决系统架构中的两个关键问题:高可用和高性能.ActiveMQ服务的高可用性是指,在ActiveMQ服务性能不变.数据不丢失的前提下,确保当系统灾难出现时ActiveMQ能够持续提供消 ...
- hadoop之 map个数控制
hadooop提供了一个设置map个数的参数mapred.map.tasks,我们可以通过这个参数来控制map的个数.但是通过这种方式设置map的个数,并不是每次都有效的.原因是mapred.map. ...
- 关于 BigDecimal 的小数位的入舍去操作
BigDecimal 保留小数 的 入舍操作, 6 中 策略 : RoundingMode 里面的 枚举 和 BigDecimal 的 常量 是等价的 UP(BigDecimal.R ...
- 如何调试触发器-MSSQL (转帖)
调试触发器 //------------------------------------- 作者:四海为圈(原创) //------------------------------------- 1. ...
- golang kafka client
针对golang的 kafka client 有很多开源package,例如sarama, confluent等等.在使用sarama 包时,高并发中偶尔遇到crash.于是改用confluent-k ...
- java学习之路之javaSE基础2
java学习之路之javaSE基础2 所有的代码都是引用他人写的. 1.逻辑运算符 //&,|,^,! //int x = 10; //5 < x < 15 //x > 5 ...
- Java设计原则之里氏替换原则
里氏代换原则由2008年图灵奖得主.美国第一位计算机科学女博士Barbara Liskov教授和卡内基·梅隆大学Jeannette Wing教授于1994年提出.其严格表述如下:如果对每一个类型为S的 ...
- JavaScript-Tool：moment-timezone.js
ylbtech-JavaScript-Tool:moment-timezone.js Parse and display dates in any timezone. 1. Format Datas ...
- js原生态函数中使用jQuery中的 $(this)无效的解决方法
原文地址:http://www.jb51.net/article/27238.htm 今天遇到一个听郁闷的问题,正如title所说 js中原生态函数在jQuery 中使用 $(this) 被解析成un ...
- javascript对象讲解
js的数据类型 基本数据类型:string undefined null boolean number 引用数据类型:object 二者的区别: 基本数据类型就是简单的赋值,引用数据 ...