vue中使用echarts(vue+vue-cli+axios+jsonp+echarts)
一、安装echarts:
cnpm i echarts -D
二、在vue-cli的main.js文件中引用echarts:
import charts from 'echarts'
Vue.prototype.$echarts = charts
三、echarts详细代码:
echarts.vue:
<template>
<div>
<div id="myChart">
</div>
</div>
</template>
<script>
export default {
methods: {
drawLine(){
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'));
this.$axios.get("http://127.0.0.1:8000/get_data")
.then(function(res){
// 绘制图表
myChart.setOption({
title: { text: res.data.title },
tooltip: {},
xAxis: {
data: res.data.xAxisData
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: res.data.seriesData
}]
});
})
.catch(function(err){
console.log(err);
})
}
},
mounted(){
this.drawLine();
}
}
</script>
<style>
#myChart{
height: 500px;
}
</style>
四、上面的图表数据通过axios获取,node.js代码如下:
let express = require("express");
let app = express();
app.get("/get_data", function(req, res, next){
res.header("Access-Control-Allow-Origin", "*");
let response = {
title: '在Vue中使用echarts',
xAxisData: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
seriesData: [10, 26, 16, 20, 16, 30]
};
res.type('application/json');
res.jsonp(response);
});
app.listen(8000, function(){
console.log("开始执行请求");
});
vue中使用echarts(vue+vue-cli+axios+jsonp+echarts)的更多相关文章
- vue中使用时间插件、vue使用laydate
<input id="time1" readonly="readonly" placeholder="这里选择时间" v-model= ...
- 073——VUE中vuex之使用actions和axios异步初始购物车数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中,使用element ui的弹窗与echarts之间的问题
今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就 ...
- vue中简单的数据请求 fetch axios
fetch 不需要额外的安装什么东西,直接就可以使用 fetch(url, { method:'post', headers: { 'Content-Type': 'application/x-www ...
- 013——VUE中多种方式使用VUE控制style样式属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【Vue中的坑】Vue打包上传线上报Uncaught SyntaxError: Unexpected token <
今天在vue打包上传线上后,报一下错误,一下就懵了,这可咋整啊,一如既往的想都没想就开始复制错误,上网开搜 Uncaught SyntaxError: Unexpected token < Un ...
- 【Vue中的坑】Vue中的@mouseenter没反应?
在开发中想实现鼠标悬浮,然后发现事件不由被出发,查找资料,发现并不是所有情况都不能用 下面就简单的说一下如何避免这种情况 如果你的悬浮事件是在 a 标签上,那么你直接使用就会出问题,你需要加一个nat ...
- 【Vue中的坑】vue项目中动态绑定src不显示图片解决方法
v-for绑定src的数据如下: data() { return { img_src:"../../assets/images/mirror-service.png" } } 渲染 ...
- 【Vue中的坑】Vue中的修改变量没有效果?
使用箭头函数 this.$forceUpdate();
随机推荐
- Git和Github的使用
Git和Github的基本操作 一.了解Git和Github 1.什么是GIT? Git是一个免费.开源的版本控制软件 2.什么是版本控制系统? 版本控制是一种记录一个或若干个文件内容变化,以便将来查 ...
- 初步了解autoencoder
初步了解autoencoder 学习自莫烦python 什么是autoencoder? 自编码(autoencoder)是一种神经网络的形式. 例子:一张图片->对其进行打码->最后再将其 ...
- win10自带虚拟机的使用(Hyper-v)
昨天刚发现的觉得特别好用,故推荐一下,跟VM虚拟机的使用方法是一样的 1.点击开始菜单中的<设置>图标,进入设置页码 2.点击<应用>图标,进入应用页码,并找到程序和功能 3. ...
- HTML5自学
1.1 标题文本 在HTML5中,文本的结构除了以行和段落出现之外,还可以作为标题存在,通常一篇文档最基本的结构就是由不同级别的标题和正文组成的. 例如1:(中国门户网站) https://www ...
- certutil 命令配合PS反弹后门
Certutil.exe是一个命令行程序,作为证书服务的一部分安装.您可以使用Certutil.exe转储和显示证书颁发机构(CA)配置信息,配置证书服务,备份和还原CA组件以及验证证书,密钥对和证书 ...
- C++ 类类型转换函数explicit 关键字
标准数据之间会进行 隐式类型安全转换. 转换规则: 隐式类型转换的问题: #include <iostream> #include <string> using namesp ...
- sql--select into,create database,create table,Constraints
SQL SELECT INTO 语句可用于创建表的备份复件.SELECT INTO 语句SELECT INTO 语句从一个表中选取数据,然后把数据插入另一个表中.SELECT INTO 语句常用于创建 ...
- 平时工作使用到的idea快捷键或者技巧
平时工作使用到的idea快捷键或者技巧 alt+enter 快速导入包 alt+insert 快速生成setter和getter ctrl+alt+l 格式化代码 /**然后回车 快速生成文档注释 a ...
- jumpserver开源堡垒机部署安装
0x01.前言 Jumpserver 是全球首款完全开源的堡垒机,使用 GNU GPL v2.0 开源协议,是符合 4A 的专业运维审计系统. Jumpserver 使用 Python / Djang ...
- 全局捕获异常(适用于SpringMvc,SpringBoot项目)
@ControllerAdvice 是controller的一个辅助类,最常用的就是作为全局异常处理的切面类.约定了几种可行的返回值,可以返回String字符串,也可以返回ModelAndView,也 ...