vue画图运用echarts
<template>
<div class="tubiao">
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</template> <script>
import echarts from 'echarts';
export default {
name: 'tubiao',
data () {
return {
chart: null
}
},
methods:{
drawPie (id) {
this.chart = echarts.init(document.getElementById('main'));
this.chart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
})
}
},
mounted(){
this.$nextTick(function() {
this.drawPie('main');
var that = this;
var resizeTimer = null;
window.onresize = function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
that.drawPie('main');
}, 100);
}
});
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>
先进行安装echarts,
然后在根据echarts官网的提示例子,进行开发练手,
最后就是配置一下路由,进行页面的跳转。
更多更好的效果,可以再echarts官网查看。
vue画图运用echarts的更多相关文章
- Vue中使用ECharts画散点图加均值线与阴影区域
[本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- 在vue中调用echarts中的地图散点图~
首先!当然是在vue中引入echarts! 命令行 npm install echarts --save 在main.js文件中里引入 import echarts from 'ech ...
- vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined
vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined 借鉴了该大神的文 ...
- vue 下实现 echarts 全国到省份的地图下钻
vue 下实现 echarts 全国到省份的地图下钻 项目地址:https://github.com/cag2050/vue_echarts_v3_demo
- vue+vuex+axios+echarts画一个动态更新的中国地图
一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...
- vue组件之echarts报表
vue组件之echarts报表 将echarts报表封装成组件,动态传入数据,显示图表. 1.饼状图 父组件: <MPie :datas="piedata"></ ...
- 记录下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 ...
随机推荐
- Delphi WriteFile函数
- MyEclipse基本配置及优化【MyEclipse_10.7】
MyEclipse基本配置 MyEclipse所有的配置都是基于工作空间的,当换了个工作空间,之前的所有配置信息就失效了.(建议每次换工作空间之前就配置好基本信息) 1.修改工作空间编码为UTF-8 ...
- IPC之namespace.c源码解读
// SPDX-License-Identifier: GPL-2.0 /* * linux/ipc/namespace.c * Copyright (C) 2006 Pavel Emelyanov ...
- Python库整理
库名称简介 Chardet字符编码探测器,可以自动检测文本.网页.xml的编码. colorama主要用来给文本添加各种颜色,并且非常简单易用. Prettytable主要用于在终端或浏览器端构建格式 ...
- 【杂题】cf1041fF. Ray in the tube
死于没有处理边界 题目描述 题目大意 在两面镜子上各选定一个整数位置的点 A 与 B,并从其中一个点向另一个射出一条光线,使得接收到光线的传感器数量尽可能的多.传感器不重叠. 题目分析 我们来初步考虑 ...
- Struts2标签:s:password 修改时密码为空的问题
s:password 有个属性showPassword默认为false,想要密码显示,设置标签属性 showPassword="true" 即可.
- puppet 3+Unicorn+Nginx安装配置
puppet 3+Unicorn+Nginx安装配置 2014-08-15 10:58 酒瓶不倒 酒瓶不倒的博客 字号:T | T 一键收藏,随时查看,分享好友! Unicorn 效率要比 Webri ...
- ESP8266—“ICACHE_FLASH_ATTR”宏
问:ESP8266_NONOS_SDK中ICACHE_FLASH_ATTR宏的用途是什么?我看到它取决于ICACHE_FLASH,但我不知道何时应该定义该符号.什么时候需要包括它?答:对于ESP826 ...
- MQTT 入门介绍——菜鸟教程
一.简述 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的"轻量级& ...
- AngularJs-变量
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...