echarts-图表

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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值