zoukankan      html  css  js  c++  java
  • 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%',
    '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);
    }
    });
    }

    静态效果图(非调用后):

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

  • 相关阅读:
    Android Media Playback 中的MediaPlayer的用法及注意事项(二)
    Android Media Playback 中的MediaPlayer的用法及注意事项(一)
    34. Search for a Range
    33. Search in Rotated Sorted Array
    32. Longest Valid Parentheses
    31. Next Permutation下一个排列
    30. Substring with Concatenation of All Words找出串联所有词的子串
    29. Divide Two Integers
    28. Implement strStr()子串匹配
    27. Remove Element
  • 原文地址:https://www.cnblogs.com/xiaorong-9/p/6087898.html
Copyright © 2011-2022 走看看