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 折柱混合图 (绑数据后)的更多相关文章

  1. echarts折柱混合(图表数据与x轴对应显示)

    一天24个小时,每个小时不一定都有对应的数据,所以后台给出的数据,只有每个时间点对应的数据,比如4点,给的是112,5点的242,其他时间没有,则只显示4点,5点时候的数据,那么现在对应的时间点就是后 ...

  2. flask+layui+echarts实现前端动态图展示数据

    效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...

  3. 用Echarts的力向导图可视化数据

    学习背景:做一个图论的题目的时候需要将结果可视化来直观的看效果,所以使用Echarts来画.感觉效果不错. Echarts下载地址:https://echarts.baidu.com/download ...

  4. echarts 中 柱图 、折线图、柱图层叠

    app.title = '折柱混合'; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: ...

  5. ECharts图表之柱状折线混合图

    Echarts 官网主页  http://echarts.baidu.com/index.html Echarts 更多项目案例  http://echarts.baidu.com/echarts2/ ...

  6. echarts、higncharts折线图或柱状图显示数据为0的点

    echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...

  7. 异步加载 Echarts图的数据

    <script src="~/Scripts/NewEcharts/echarts.js"></script> <script type=" ...

  8. cacti汇总流量图-将数据合并后作图

    在使用Cacti方便快捷的建立监控图时,往往根据实际应用必须监控几台甚至上百台服务器的汇总流量图来观察该应用服务器组的总流量等指标. 这里我们就来介绍如何用cacit快速的建立汇总流量图,其他汇总图建 ...

  9. 时隔两个月再写的Echarts(Enterprise Charts,商业级数据图表)一文

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

随机推荐

  1. 深刻理解HDFS工作机制

    深入理解一个技术的工作机制是灵活运用和快速解决问题的根本方法,也是唯一途径.对于HDFS来说除了要明白它的应用场景和用法以及通用分布式架构之外更重要的是理解关键步骤的原理和实现细节.在看这篇博文之前需 ...

  2. C#的FTP上传下载的实验

    前段时间做了一个FTP操作服务器文件的实验,现在把一些经验写下来,免得忘记. 1.上传的处理:目标文件夹A上传到服务器指定目录.先检索服务器目录中有无同名文件夹,若有,则先改名,上传成功后再删除,上传 ...

  3. CCNA网络工程师学习进程(7)路由器的路由配置

        前面一节已经介绍了路由器的端口配置,接着我们介绍路由器的路由配置:静态路由.默认路由和浮动路由的配置:动态路由协议的配置,包括RIP.IGRP.EIGRP和OSPF.     (1)路由器的基 ...

  4. DOM节点删除之empty和remove

    DOM节点删除之empty和remove 刚学了新知识,虽然是一个小知识点,但还是忍不住想和大家分享. .empty()是指对该节点后代的删除,结果是清空该节点(该节点里面已无元素). .remove ...

  5. H3 BPM报销流程开发示例

    以报销流程为示例,介绍H3 BPM的流程开发过程. 报销流程的表单效果如下: 审核流程为填写报销申请.主管审核.总监审核(1000以上).出纳付款,显示如下: 步骤一:准备工作 使用管理员账号的登录H ...

  6. Cstring 的用法

    CString位于头文件afx.h中. 这篇文章就来讨论这些技巧. 使用CString可以让你对字符串的操作更加直截了当.这篇文章不是CString的完全手册,但囊括了大部分常见基本问题. 这篇文章包 ...

  7. SDN理解:SDN现状

    目录 - SDN现状 - (一)SDN现状 - SDN诞生的背景 - SDN的介绍 - (二)SDN领域的相关组织和发展现状 - 1.ONF - 2.OpenDaylight - 3. IETF -  ...

  8. equals和hashcode为什么要一起重写

    equals()方法与hashCode()的通用协定是:2.1 如果两个对象相等(equal),那么必须拥有相同的哈希码(hash code)2.2 即使两个对象有相同的哈希值(hash code), ...

  9. MQTT协议之 Apache Apollo服务

    一.说明 MQTT是IBM开发的一个即时通讯协议,有可能成为物联网的重要组成部分.该协议支持所有平台,几乎可以把所有联网物品和外部连接起来,被用来当做传感器和致动器(比如通过Twitter让房屋联网) ...

  10. Unity3D脚本使用:Time

    1.Time 使用方式 使用效果 2.yield 延迟执行    嵌套延迟