echarts-图表

原创 2015年11月18日 17:25:26

1. 为ECharts准备一个具备大小(宽高)的Dom

<div id="content" style="height:280px;"></div>

2.js设置

//创建图表
  function initBarChar(data){
   //自定义数据 

    var xArray=[];
    var series=[
          {name:'表数量', type:'bar',data:tableArray},
          {name:'视图数量', type:'bar',data:viewArray},
          {name:'字段数量', type:'bar',data:columnArray}
    ];
    
    // 路径配置  
    require.config({  
        paths:{   
            'echarts' : 'js/echarts',  
            'echarts/chart/bar' : 'js/echarts'  
       }  
    }); 

    // 使用  
    require(  
       [  
         'echarts',  
         'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载  
       ],  
       function (ec) {  
          // 基于准备好的dom,初始化echarts图表  
          var myChart = ec.init(document.getElementById('line1'));   
          var option={
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['表数量','视图数量','字段数量']  
                },
                dataZoom : {
                    show : true,
                    reltime: false,
                    start: 0,
                    end: 100
                },
                toolbox: {
                    show : true,
                    feature : {
                        restore : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : xArray,
                        axisLabel:{
                            rotate:0
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                series :series
          };
          // 为echarts对象加载数据   
          myChart.setOption(option);   
       }  
    );  
 }


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

echarts图表导出excel示例

前台 form id="exportForm" action="/foodBreak/statistical/importData" method="post"> input type="hi...

vue.js+Echarts开发图表放大缩小功能

最近使用echarts来开发某系统的图表功能,先申明我以前用的ext.js,ext.js对图表有自己的一套组件,用起来也很方便。但是由于ext.js过于臃肿,公司决定使用echarts来开发图表功能。...

百度Echarts-免费的商业产品图表库

ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)