![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
echarts
文章平均质量分 83
Kinghiee
Front-end Developer
展开
-
策略和状态模式应用——tab切换时,图表内容变化(二对一)
注意:本篇博客不讲原理,如果看不懂请先补充策略模式、状态模式、闭包、惰性求值、函数式编程等相关内容一、效果二、为什么使用策略和状态模式vue普通的tab切换很简单,使用下面代码就可以搞定。凡事就怕但是,如果使用下面的代码形式画echarts的话,切换图的时候,因为echarts获取不到宽高,导致图渲染不到页面上去。有人会说可以加this.$nexttick,是的。可以通过加入该函数做到延迟的echarts获取到dom宽高再渲染,但是需要有几个切换加几个this.$nexttick。而且有几个切换需要原创 2021-11-07 17:04:15 · 299 阅读 · 1 评论 -
Vue+TS Echarts股票图
一、效果图二、echarts 股票配置根据dom 生成echarts 实例(this as any)[instance] = echarts.init(this.$refs[ref] as HTMLBaseElement); //创建实例注:instance,ref是变量需要外部传入2. 股票基础配置 import ECHARTSOPTIONSCONFIG from './config/echartConfig';//导入 /* ...... ... .. */(this a原创 2021-07-22 14:29:23 · 2184 阅读 · 5 评论 -
echarts 疫情可视化(大屏显示)
一、效果图二、制图①:数据准备②:导入需要的js文件③:HTML框架准备④:css、js文件引入⑤:VUE框架生以及主要函数生成①:数据准备1 :准备全国省会城市、特别行政区、直辖市坐标数据2 :准备全国地图和各省市的json数据用于地图展示和地图下钻3 :疫情数据准备全国疫情数据全世界疫情前22国家数据②:导入需要的js文件疫情可视化需要echarts.min.js、vue.js、axios.min.js文件③:HTML框架准备④:css、j原创 2020-07-02 08:28:02 · 10389 阅读 · 13 评论 -
Vue Echarts飞机航线图
声明本案例来着官方案例航线图效果图步骤①:文件导入②:基本配置③:图标配置④:生成结果①:文件导入 <script src="../../js/echarts.min.js"></script> <script src="../../js/china.js"></script> <script src="../../js/vue.js"></script>②:基本配置let kinghi原创 2020-05-27 21:08:55 · 13545 阅读 · 27 评论 -
Vue Echarts 河南省疫情图
1224原创 2020-05-21 07:35:53 · 1260 阅读 · 1 评论 -
echarts插件——全国疫情图
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=n...原创 2020-05-21 09:45:15 · 4279 阅读 · 3 评论