zoukankan      html  css  js  c++  java
  • 实现柱状图功能

    用的插件实现柱状图功能

    /*
    * 渲染图表
    */
    function renderChart() {
    var data = $("#channelListId").bootstrapTable("getData");         //表格id
    var names = [];
    var count = [];
    $(data).each(function(index, item) {
    if(item.channelName != "合计"){
    names.push(item.channelName);
    count.push(item.insuranceNumber || 0);
    }
    /* if(item.channelName!="-"){

    } */
    });
    //柱状图
    var myChart = echarts.init(document.getElementById('mainBar'));                 //柱状图id

    var option = {
    color : [ '#3398DB' ],
    tooltip : {
    trigger : 'axis',
    axisPointer : { // 坐标轴指示器,坐标轴触发有效
    type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
    }
    },
    legend : {
    data : [ '投保人数' ]
    },
    grid : {
    left : '7%',
    right : '8%',
    bottom : '7%',
    containLabel : true
    },
    xAxis : [ {
    type : 'category',
    data : names,
    axisTick : {
    alignWithLabel : true
    }
    } ],
    yAxis : [ {
    type : 'value'
    } ],
    series : [ {
    name : '投保人数',
    type : 'bar',
    barWidth : '10%',
    data : count
    } ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);

    };

  • 相关阅读:
    141. Linked List Cycle
    2. Add Two Numbers
    234. Palindrome Linked List
    817. Linked List Components
    《算法图解》之快速排序
    C++-对象指针的滥用
    C++学习书籍评价
    C++-随机数的产生
    Java-重载和重写区别剖析
    Qt- 图形界面应用程序的运行模式
  • 原文地址:https://www.cnblogs.com/yzw23333/p/7210847.html
Copyright © 2011-2022 走看看