echarts 折柱混合图 (绑数据后)
html:
<div class="flot-chart-content" id="flot-dashboard-chart"></div>
js:
function drawChartOne(clustertag) {
$.ajax
({
cache: false,
async: true,
type: 'GET',
data: "",
url: "/index/chart?name="+clustertag+"&series1=10000403&series2=10000405",
success: function (data) {
// echartone(data["xdata"], data["data1"], data["data2"]);
var myChartdash = echarts.init(document.getElementById('flot-dashboard-chart'));
var appdash = {};
// appdash.title = '折柱混合';
var olddata1 = data["data1"];
var data1 = [];
for (var i = 1; i < olddata1.length; i++) {
data1.push(Math.round(olddata1[i]*100)/100);
}
var olddata2 = data["data2"];
var data2 = [];
for (var i = 1; i < olddata2.length; i++) {
data2.push(Math.round(olddata2[i]*10000)/100);
}
var optiondash = {
tooltip: {
trigger: 'axis'
},
// toolbox: {
// feature: {
// dataView: {show: true, readOnly: false},
// magicType: {show: true, type: ['line', 'bar']},
// restore: {show: true},
// saveAsImage: {show: true}
// }
// },
// 右上角的可操作按钮
legend: {
left:'50',
top:'20',
// icon:'droplet',
data:['集群CPU%','集群内存%']
},// 标志
grid:{
top:10,
left:50,
height:'85%',
width:'90%'
},//可控制其在页面的位置及大小
xAxis: [
{
type: 'category',
boundaryGap: [0, '80%'],
data: data["xdata"]
}
],
yAxis: [
{
type: 'value',
// name: '水量',
boundaryGap: [0, '100%'],
splitLine: {
show: false
},
// min: 0,
// max: 250,
// interval: 50,
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
// name: '温度',
boundaryGap: [0, '100%'],
splitLine: {
show: false
},//隐藏内部网格线
// min: 0,
// max: 25,
// interval: 5,
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name:'集群CPU%',
type:'line',
itemStyle: {
normal: {
color: 'rgb(121,193,240)'
}
},
//areaStyle: {
//normal: {
//color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
//offset: 0,
//color: 'rgb(111, 177, 185)'
//}, {
//offset: 1,
//color: 'rgb(183, 216, 237)'
//}])
//}
//}, 加上areaStyle 效果为图2
data:data1
},
{
name:'集群内存%',
type:'bar',
itemStyle: {normal: {
color:"#A3E1D4"
}
},
// barCategoryGap : '20', 类目间距
yAxisIndex:1,
data:data2
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChartdash.setOption(optiondash);
}
});
}
静态效果图(非调用后):
本文为本人用来记录自己做的一些东西,如有不对的地方,请见谅。 你是我支撑下去的理由
echarts 折柱混合图 (绑数据后)的更多相关文章
- echarts折柱混合(图表数据与x轴对应显示)
一天24个小时,每个小时不一定都有对应的数据,所以后台给出的数据,只有每个时间点对应的数据,比如4点,给的是112,5点的242,其他时间没有,则只显示4点,5点时候的数据,那么现在对应的时间点就是后 ...
- flask+layui+echarts实现前端动态图展示数据
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
- 用Echarts的力向导图可视化数据
学习背景:做一个图论的题目的时候需要将结果可视化来直观的看效果,所以使用Echarts来画.感觉效果不错. Echarts下载地址:https://echarts.baidu.com/download ...
- echarts 中 柱图 、折线图、柱图层叠
app.title = '折柱混合'; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: ...
- ECharts图表之柱状折线混合图
Echarts 官网主页 http://echarts.baidu.com/index.html Echarts 更多项目案例 http://echarts.baidu.com/echarts2/ ...
- echarts、higncharts折线图或柱状图显示数据为0的点
echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...
- 异步加载 Echarts图的数据
<script src="~/Scripts/NewEcharts/echarts.js"></script> <script type=" ...
- cacti汇总流量图-将数据合并后作图
在使用Cacti方便快捷的建立监控图时,往往根据实际应用必须监控几台甚至上百台服务器的汇总流量图来观察该应用服务器组的总流量等指标. 这里我们就来介绍如何用cacit快速的建立汇总流量图,其他汇总图建 ...
- 时隔两个月再写的Echarts(Enterprise Charts,商业级数据图表)一文
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...
随机推荐
- Android 关于在Activity中监听ListView
Android 开发时,最常用的控件之一就是ListView了,而使用ListView的同时,必然需要对它设置监听器,常用的监听器有这么几个: 1. OnItemClickListener // 监听 ...
- js处理层级数据结构的一些总结
开发者对复杂的数据结构的处理能力也是体现开发者水平的一个度量吧...最近发现自己对一些嵌套数据结构.层级数据结构的处理能力不大足...经常被这些把自己绕晕...严重影响开发效率...就稍微低总结了一下 ...
- TCP报文中的SYN,FIN,ACK,PSH,RST,URG
TCP的三次握手是怎么进行的:发送端发送一个SYN=1,ACK=0标志的数据包给接收端,请求进行连接,这是第一次握手:接收端收到请求并且允许连接的话,就会发送一个SYN=1,ACK=1标志的数据包给发 ...
- python3.5学习之路_day1_login
登录程序1.输入用户名密码2.认证成功后显示欢迎信息3.输错三次后锁定 #!/usr/bin/env python #_*_coding:utf-8_*_ #by anthor zhangxiaoyu ...
- 伪 alter 弹窗 +弹窗统一
你应该有遇到这种情况:alert() 在手机上面显示的时候 反正是不好看 有的时候就只看到一个白色的框 看不到提示信息 反正很反人类 这时候我觉得 马上会有产品跟你说 这个要改掉. 然后我就遇 ...
- json格式化和查看工具
以前一直以来都觉得xml个可读性要比json的可读性好,后来使用了JSON Viewer这个小工具之后,发现自己错了.之前认为json的可读性差,完全是因为没有很好的查看工具.JSON Viewer这 ...
- TCP的滑动窗口机制【转】
原文链接:http://www.cnblogs.com/luoquan/p/4886345.html TCP这个协议是网络中使用的比较广泛,他是一个面向连接的可靠的传输协议.既然是一个可靠的 ...
- 【锋利的Jquery】读书笔记十一
项目进度太赶,天天公司加班12小时,没时间看书充电.2016年再更新一篇吧.现在凌晨2点36分. 2017加油哦 jquery合适的选择器 $("#id") 无疑是最佳提高性能的方 ...
- C#中的系统时间获取问题
C#获取当前系统时间 2010-01-02 16:24 --DateTime 数字型 System.DateTime currentTime=new System.DateTime(); 取当前年月日 ...
- LeetCode 213. House Robber II
Note: This is an extension of House Robber. After robbing those houses on that street, the thief has ...