echarts 折柱混合图（绑数据后）

html：

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);
}
});
}

静态效果图（非调用后）：

本文为本人用来记录自己做的一些东西，如有不对的地方，请见谅。你是我支撑下去的理由

posted on 2016-11-22 09:31 你是我支撑下去的理由阅读(2025) 评论(0) 编辑收藏举报

echarts 折柱混合图 （绑数据后）

echarts 折柱混合图（绑数据后）