vue中添加echarts
方法一:全局引入echarts
步骤:
1、全局安装 echarts依赖。 cnpm install echarts -- save
2、引入echarts模块,在Vue项目的main.js中引入echarts模块,即是写入如下代码:
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3、在需要的组件,如index.vue中
<template>
<div class="echart-box" id="E_zkcl" style="width: 380px;
height:330px"></div>
</template>
<script>
export default {
data(){
return(){
}
},
methods: {
drawLine(){
let myChart1 = this.$echarts.init(document.getElementById('E_zkcl')) }
myChart1.setOption({
color:['#4ED8DA'],
title : {
text: '每月检修统计',
x:,
y:,
textStyle:{
fontSize: ,
fontWeight: 'bolder',
color: '#333'
}
},
tooltip : {
trigger: 'axis'
},
grid:{
borderWidth:,
x:'10%',
y:'20%',
x2:'5%',
y2:'15%',
},
calculable : true,
xAxis : [
{
type : 'category',
axisLine:{
show:false,
},
splitLine:{
show:false, //不显示分割线
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis : [
{
type : 'value',
axisLine:{
show:false,
}
}
],
series : [
{
name:'数量',
type:'bar',
data:[, , , , , , , , , , , ],
}
]
});
//根据窗口的大小变动图表 --- 重点
window.onresize = function(){
myChart.resize();
//myChart1.resize(); //若有多个图表变动,可多写
}
},
mounted(){
this.drawLine();
} }
</script>
方法二:按需引入
vue中添加echarts的更多相关文章
- vue中添加Echarts图表的使用,Echarts的学习笔记
项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- vue中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
- 在vue中调用echarts中的地图散点图~
首先!当然是在vue中引入echarts! 命令行 npm install echarts --save 在main.js文件中里引入 import echarts from 'ech ...
- Vue中使用ECharts画散点图加均值线与阴影区域
[本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...
- vue中添加util公共方法&&ES6之import、export
vue中添加util公共方法&&ES6之import.export https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Re ...
- 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题
今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...
- vue中使用echarts(vue+vue-cli+axios+jsonp+echarts)
一.安装echarts: cnpm i echarts -D 二.在vue-cli的main.js文件中引用echarts: import charts from 'echarts' Vue.prot ...
- VUE中集成echarts时 getAttribute of null错误
错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...
随机推荐
- Dubbo接口测试方法及步骤
1)打开soapUI,点击File--New project: 2)右键New REST service from URL,注:因为dubbo接口不像http接口一样有URL,所以这里的URL可以随便 ...
- 正经学C#_运算符优先级:[c#入门经典]
学了那么多的运算符,终于差不多结束了,现在要说一下 总体的优先级别 高到低的顺序 类别 运算符 结合性 前缀 ++,--,(),+,-,!,~ 从左到右 乘除 * / % 从左到右 加 ...
- swift 纯代码自定义控件
1.创建自定义控件 import UIKit class CustomView: UIView { var lab:UILabel! var btn:UIButton! /************ 将 ...
- iOS的iPhone屏幕尺寸、分辨率、PPI和使用123倍图
- 分层最短路-2018南京网赛L
大概题意: 题意:N个点,M条带权有向边,求将K条边权值变为0的情况下,从点1到点N的最短路. 拓展:可以改变K条边的权值为x 做法:把每个点拆成k个点,分别表示还能使用多少次机会,构造新图. 实际写 ...
- (原创)团体程序设计天梯赛-练习集 L1-048 矩阵A乘以B (15 分)
给定两个矩阵A和B,要求你计算它们的乘积矩阵AB.需要注意的是,只有规模匹配的矩阵才可以相乘.即若A有Ra行.Ca列,B有Rb行.Cb列,则只有Ca与Rb相等时,两 ...
- HTTP基本认证和JWT鉴权
一.HTTP基本认证 Basic Authentication——当浏览器访问使用基本认证的网站的时候, 浏览器会提示你输入用户名和密码. http auth的过程: · 客户端发送http请求 · ...
- Nginx02---指令集实现静态文件服务器
location 实现静态服务器,就是root和alias命令,他们位于location文件块中,详细:https://www.jianshu.com/p/4be0d5882ec5 root root ...
- 去除IDEA报黄色/灰色的重复代码的下划波浪线
解决方法: File---->Settings
- UVA 10806
#include<iostream> #include<algorithm> #include<cstdio> #include<cstring> us ...