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图表中的点、柱形或者折线显示不出来,但是有数据的问题解决(另附后台返回数据实例代码)

目前我遇到的暂时有两种情况,一个是版本,一个是require时候配置问题; 版本可以理解,因为引用的echarts.js版本比价低,导致我所画的图出不来;后来换了最新版本的js就好了,直接取官网下载...

Vue2+Echarts实现多种图表数据可视化Dashboard详解(附源码)

数据可视化  将数据通过图表的形式展现出来将大大的提升可读性和阅读效率 本例包含柱状图、折线图、散点图、热力图、复杂柱状图、预览面板等 技术栈 vue2.xvuex 存储公共变量,如色值等...

echarts静态图表demo--2种写法

  • 2015年11月10日 09:07
  • 438KB
  • 下载

jquery+echarts+php实时动态图表显示

  • 2016年01月06日 10:16
  • 33KB
  • 下载

Echarts图表通过Ajax动态更新数据

由于业务需求需要做一个可视化的展示Demo,这个Demo需要前后端的共同支撑,所以思路大致是:首先我们想到的是用ajax动态请求服务端获取到json文件后,然后将其解析为可以直接使用的数据,最后把这些...

QT5中使用Echarts图表组件演示代码

  • 2015年12月21日 15:20
  • 1.95MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:echarts-图表
举报原因:
原因补充:

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