echarts渲染一个风向图
今天给大家说一个用echarts渲染一个风向图,这里图上其实有三个要素,风向,风级和能见度,主要还是讲讲代码里面的坑
1.风向图标方向修改以及设置
var ownData = echarts.util.map(windGrade, function (item, index) {
return {
value: windGrade[index],
symbolRotate:360-windDir[index]};
});
这里的ownData 包括了一个value和symbolRotate,第一个是风级的数值,第二个则是角度,官方说symbolRotate:windDir[index],但是会发现图标的方向不对,于是自己根据实际展示需要做了调整,前面用360来减去对应的角度值
echarts官方是再series中的markPoint设置
symbol:'image://wind.png',
symbolSize:'26',,但是发现并不起作用,而是直接再series下进行symbol和symbolSize的设置
2.自定义tooltip显示内容
tooltip: {
formatter: function(params) {
这里的params,可以alert一下,看看具体值
//alert(JSON.stringify(params));
return '<p>时间:'+params[0].name+'</p><p><p>能见度:'+params[2].value+'</p><p>风级:'+params[1].value+'</p><p>风向:'+params[0].value+'</p>';
},
trigger: 'axis',
axisPointer: {
animation: false
}
},
3.禁止图标拖拽操作
将dataZoom设置取消,因为会发现设置之后,对应值会报错,说value未找到,并且上下的数据横轴对应不齐
4.所有节点数据都显示出来
echarts默认会根据div的宽度来展示数据节点名称,如果向全部显示,再series设置showAllSymbol: true,即可
最新文章
- 379. Design Phone Directory
- centos7安装数据库
- [php入门] 3、WAMP中的集成MySQL相关基础操作
- linux下安装redis的详细过程
- 『Golang』跨平台TUI(基于文字的用户界面)库Terbox-Go文档翻译
- uva 1152 4 values whose sum is zero ——yhx
- sql server 2008 操作数据表
- 配置《算法 第四版》的Eclipse开发环境
- CS小分队第一阶段冲刺站立会议(5月6日)
- MEF(Managed Extensibility Framework)依赖注入学习
- Microsoft Visual C++ Runtime Library Runtime Error的解决的方法
- jquery uploadify插件多文件上传
- 《剑指Offer》附加题_用两个队列实现一个栈_C++版
- TestNG深入理解
- org.apache.http.client.ClientProtocolException: URI does not specify a valid host name
- 三目算法、if/else,switch/case运用
- 1.Magicodes.NET框架之路——起航
- Image转Base64
- shell中的ps命令详解
- codeforces148----E. Porcelain
热门文章
- 《图解HTTP》阅读笔记--第二章 简单的HTTP协议--第三章 HTTP报文信息
- jenkins在windows系统下部署安装,使用
- springcloud系列10 整合Hystrix遇到的坑:
- js常用代码收集
- C语言中函数声明、形参、实参
- Codeforces Round #532 (Div. 2)- A(思维)
- Hie with the Pie(状压DP+可以经过多次相同的点要全部走过的最短回路)
- form组件之modelForm
- Autel MaxiSys MS908CV Diagnostic System for Commercial Vehicles
- 《mac的git安装手册-2》