echarts饼图实现多环形对比图
来源:互联网 发布:中建七局网络协同平台 编辑:程序博客网 时间:2024/05/30 05:23
要求:展示室外温度、室内温度设定点、室内温度的多环形对比图
最终实现效果图:
代码实现详解:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
</head>
<body style="background-color:#0f234f;">
<div id="pie" style="width:500; height:500px;"></div>
<script>
var total = 50;//最大温度数据单独出来定义,方便环形总数的修改
var myChart = echarts.init(document.getElementById('pie');
placeHolderStyle = {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
}
}
};
option = {
title : {
text: '室内温度',//主标题
subtext: '26℃',//副标题
textStyle: {//主标题样式
color: '#fff',
fontWeight: 'bold',
fontSize: 20
},
subtextStyle: {//副标题样式
color: '#fff',
fontSize: 20,
fontWeight: 'bold',
color: '#0f0'
},
left:'center',
top: 'middle'
},
tooltip: {
show: true,
trigger: 'item',//提示框触发类型,item数据项图形触发,主要应用于无类目轴的图表(散点图、饼形图等)
formatter: function(params, ticket, callback) {//第一个参数数据集、第二个参数是异步回调标志、第三个参数是异步回调
return params.seriesName + ": " + params.value + "℃";//系列名称:数据值
}
},
color:['#dc1439','#e6b600','#053afe'],//调色盘颜色列表,默认情况下图例和饼形环图颜色使用
legend: {
top: "44px",
left: "50%",
itemHeight: 20,//图例的高度
itemGap:10,//图例之间的间距
data: ['室外温度', '室内温度设定点', '室内温度'],//图例的数据数组
textStyle: {
color: '#fff'
},
selectedMode: true,//图例选择模式
orient: "vertical"//图例布局方式
},
series: [
{
name: '室外温度',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [180, 200],
itemStyle: placeHolderStyle,
label: {
normal: {
show: false,
}
},
data: [{
value: 28,
itemStyle: {
normal: {
color: '#dc1439'
}
}
},
{
value: total-28,
itemStyle: {
normal: {
color: 'transparent'
}
}
}]
},
{
name: '室内温度设定点',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [150, 170],
itemStyle: placeHolderStyle,
data: [{
value: 26,
itemStyle: {
normal: {
color: '#e6b600'
}
}
},
{
value: total-26,
itemStyle: {
normal: {
color: 'transparent'
}
}
}]
},
{
name: '室内温度',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [120, 140],
itemStyle: placeHolderStyle,
data: [{
value: 26,
itemStyle: {
normal: {
color: '#053afe'
}
}
},
{
value: total-26,
itemStyle: {
normal: {
color: 'transparent'
}
}
}]
}]
};
myChart.setOption(option);
</script>
- echarts饼图实现多环形对比图
- Echarts实现地图,环形图简单案例
- echarts-环形图
- ECharts 环形饼图 动态获取json数据
- ECharts 环形饼图 动态获取json数据
- echarts 之(3)环形图 属性
- echarts 之(2)环形图 属性
- 【项目实战】---ECharts绘制环形图
- echarts实现饼图
- 自定义控件实现——环形饼图
- HTML+CSS 实现环形比例图效果
- JavaScript实现的环形图比较
- 简单的实现环形比例图
- drawRect-饼状环形图
- echarts饼图间距
- ECharts饼图实例
- echarts绘制饼图
- ECharts饼图单位
- 常见浏览器的兼容问题
- iOS多线程——GCD初级介绍
- Action class [*.*.*] not found
- android studio + libSDL2.so显示一张bmp图片
- java并发编程--Runnable Callable及Future
- echarts饼图实现多环形对比图
- 利用 Python 进行量化投资分析
- Mysql 插入记录时检查记录是否已经存在,存在则更新,不存在则插入记录SQL
- display two or more logcat filters at the same time in Android Studio
- 管中窥豹IIoT(一):工业物联网价值与解决方案通用模型
- LeetCode日常刷题(3)
- C语言中比较字符串大小
- Centos7.3_64位系统下yum命令安装MySQL5.7
- 线程(7)--wait()方法、notify()方法、notifyAll()方法