数据可视化
学习数据可视化。以echarts.js为主
喜欢吃青椒吗
这个作者很懒,什么都没留下…
展开
-
echarch.js的基本使用
安装npm install echarts --save在main.js里import echarts from 'echarts'引入这个包。Vue.prototype.$echarts = echarts 往原型链上加上echarts这样就可以在组件中使用了。在Vue中开始一个例子<template> <div ref="projectMap" style="width: 100%;height:100%;"></div></temp..原创 2020-11-19 11:01:30 · 468 阅读 · 0 评论 -
如何在Vue+echarts开始画一个中国地图
第一步:先npm install echarts --save 在项目中下载好包。第二部:require("../../ndee_modules/map/js/china")在node_modules中引入中国地图。设置option属性(中国地图的各项属性)定义一个方法获取DOM并setOption就行了。var myChart = that.$echarts.init(that.$refs.map);myChart.setOption(that.option);...原创 2020-11-19 11:01:09 · 165 阅读 · 0 评论 -
Echarts.js常见参数设置
常见APIechartsecharts.init(dom,theme)。创建一个ECharts实例,返回echartsinstance,不能在单个容器上初始化多个ECharts实例。dom是实例容器,一般是一个具有宽高的div元素。必须要设置宽高。theme应用的主题。可以是一个主题的配置对象,也可以使用已经通过 使用已经通过 echarts.registerTheme 注册的主题名称。注册的主题名称。echarts.connect(group:string|Array)多原创 2020-11-19 10:59:58 · 3745 阅读 · 0 评论 -
Echarts定时刷新页面功能
问题提出背景:echarts的图层必须要定时刷新,一分钟或者5分钟向接口重新获取数据。data() { return { timer: null }},created() { this.timer = setInterval(()=>{ this.getUserCover() //一分钟调用接口一次 },60000)}destroyed() { clearInterval(this.timer) // 可以判断如果定时器还在运行就关闭 或者直接关闭}.原创 2020-11-18 11:29:13 · 1180 阅读 · 0 评论 -
Echarts的响应式布局
echarts中的响应式布局。单个图层var myChart = this.$echarts.init(this.$refs.depActive)//获取到dommyChart.setOption(this.depActive_option)//渲染dom // 窗口自适应window.onresize = function() { myChart.resize();}//但是这种方法只能对一个图层有用,如果同时对多个图层设置的话,只对最后一个图层有用。考虑到在Vue中,通常会把多..原创 2020-11-18 11:28:53 · 1063 阅读 · 0 评论