echart 之实现温度计
百度这个图表支持不是很好,有的需要自己写,看大神们实现温度计都是用 水球特效实现的我这里雕虫小计啊但是满足我了我的项目需求特此分享出来,可惜自己不是专业的前端
这是我的实现结果
好了上代码
html:
<div id="main" style="width: 400px; height: 400px;">
js代码:
<script>
var myChart = echarts.init(document.getElementById("main"));
var data = [50];
var xMax = 80;
var axisColor = '#fff';
option = {
tooltip: {
show: true,
formatter: "{b} <br> {c}"
},
yAxis: [{
min:0,
max:70,
position:'left',
offset:-140,
axisTick: {
show: true,
// color:'#fff',
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
formatter:function(value,index){
return value-20;
}
//color:'#fff',
},
splitLine: {
show: false,
// color:'#fff',
},
splitNumber :10,
}],
xAxis: [{
type: 'category',
data: ['温度'],
axisTick: {
// color:'#fff',
show: false,
},
axisLine: {
// color:'#fff',
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
}
}
}],
series: [{
name: ' ',
type: 'bar',
barWidth: 40,
silent: true,
itemStyle: {
normal: {
color: '#fdd',
barBorderRadius: [0, 0, 0, 0],
}
},
barGap: '-100%',
//barCategoryGap: '60%',
data: data.map(function(d) {
return xMax
}),
}, {
name: ' ',
type: 'bar',
barWidth: 40,
label: {
normal: {
show: true,
position: 'top',
formatter: function(o){
return o.value-30+'℃';
},
}
},
data: [{
value: 15+30,
itemStyle: {
normal: {
barBorderRadius: [0, 0, 0, 0],
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: 'rgba(225,42,84,.3)' // 0% 处的颜色
}, {
offset: 1,
color: '#ffa800' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
} ],
}]
};
myChart.setOption(option);
</script>
js脚本的引入<script type="text/javascript" src="css/echarts.min.js">
单文件引入
echart 之实现温度计的更多相关文章
- EChart系列:在echart3中使用百度地图扩展之后,如何获取到百度地图对象
最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...
- EChart使用
EChart ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等 ...
- 网站中使用echart
在网站开发中,可能会使用折线图,圆饼图,等等 来丰富网页对数据的展示,可以使用echart http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E ...
- WebGIS中利用AGS JS+eChart实现一些数据展示的探索
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...
- java 版本EChart使用
一.简介 EChart是百度开发的js图表软件,用它我们可以很方便地以图形化的方式对数据进行分析统计.该种方式js在页面动态拼接json数据,再进行渲染.这种方法的优点是,灵活,可以随时进行修改.缺点 ...
- 百度数据可视化图表套件echart实战
最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...
- e-chart 本地加载中国地图
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Echart的简单例子
[转载自:http://echarts.baidu.com/echarts2/doc/start.html] <%@ page language="java" content ...
- EChart和G2比较
1.上市时间:EChart已经久经沙场,G2算是新事物 2.源码:截止发文,在Github上 数量 EChart G2 commits 3086 8 branches 3 1 releases 43 ...
随机推荐
- 二十四、SSH介绍
1.ssh介绍: SSH先对联机数据包通过加密技术进行加密处理,加密后在进行数据传输,确保了传递的数据安全.(运维的一大重视点就是要对安全敏感) 在当前的生产环境运维工作中,绝大多数企业都是SSH协议 ...
- 十八、linux系统分区
一.磁盘存储结构图:这里注意下,分区标有64字节,则每个分区有16字节,MBR引导分区有446字节,共有510字节,一个扇区有512字节,还有俩个字节是分区结束标识.比如隐藏文件等标识,都是这2个字节 ...
- Lamda过滤替换List元素的属性值
import java.util.ArrayList;import java.util.HashMap;import java.util.Iterator;import java.util.List; ...
- scala语言yield配合for的用法实例
yield配合for的用法 话不多说见实例 package com.donews.reynold /** * Created by reynold on 2017/3/23. */ object Sc ...
- HLS图像处理总结(一)
HLS工具 以个人的理解,xilinx将HLS(高层次综合)定位于更方便的将复杂算法转化为硬件语言,通过添加某些配置条件HLS工具可以把可并行化的C/C++的代码转化为vhdl或verilog,相比于 ...
- JavaScript学习总结(三)BOM和DOM详解
转自:http://segmentfault.com/a/1190000000654274 DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西 ...
- jenkins使用(3)-设置定时任务
配置时间如果错误,代码不会运行 *表示任意时刻
- 吴裕雄--天生自然 R语言开发学习:回归(续四)
#------------------------------------------------------------# # R in Action (2nd ed): Chapter 8 # # ...
- Memcached Client 使用手册
Memcached Client 使用手册 Author: cenwenchu Email: wenchu.cenwc@alibaba-inc.com Blog:http://blog.csdn.ne ...
- <USACO09DEC>过路费Cow Toll Pathsの思路
啊好气 在洛谷上A了之后 隔壁jzoj总wa 迷茫了很久.发现那题要文件输入输出 生气 肥肠不爽 Description 跟所有人一样,农夫约翰以着宁教我负天下牛,休叫天下牛负我的伟大精神,日日夜夜苦 ...