分享

Echarts 的option选项属性

 _明心见性_ 2019-03-18

option

图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项

名称 描述
{color}backgroundColor 全图默认背景,(详见backgroundColor),支持rgba,默认为无,透明
{Array} color 数值系列的颜色列表,(详见color),可配数组,eg:['#87cefa', 'rgba(123,123,123,0.5)','...'],当系列数量个数比颜色列表长度大时将循环选取
{boolean}renderAsImage 非IE8-支持渲染为图片,(详见renderAsImage
{boolean} calculable 是否启用拖拽重计算特性,默认关闭,(详见calculable,相关的还有 calculableColor, calculableHolderColor, nameConnector, valueConnector
{boolean} animation 是否开启动画,默认开启,(详见 animation,相关的还有 addDataAnimation, animationThreshold, animationDuration, animationDurationUpdate animationEasing
{Object} timeline 时间轴(详见timeline),每个图表最多仅有一个时间轴控件
{Object} title 标题(详见title),每个图表最多仅有一个标题控件
{Object} toolbox 工具箱(详见toolbox),每个图表最多仅有一个工具箱
{Object} tooltip 提示框(详见tooltip),鼠标悬浮交互时的信息提示
{Object} legend 图例(详见legend),每个图表最多仅有一个图例,混搭图表共享
{Object} dataRange 值域选择(详见dataRange),值域范围
{Object} dataZoom 数据区域缩放(详见dataZoom),数据展现范围选择
{Object} roamController 漫游缩放组件(详见roamController),搭配地图使用
{Object} grid 直角坐标系内绘图网格(详见grid
{Array | Object} xAxis 直角坐标系中横轴数组(详见xAxis),数组中每一项代表一条横轴坐标轴,标准(1.0)中规定最多同时存在2条横轴
{Array | Object} yAxis 直角坐标系中纵轴数组(详见yAxis),数组中每一项代表一条纵轴坐标轴,标准(1.0)中规定最多同时存在2条纵轴
{Array} series 驱动图表生成的数据内容(详见series),数组中每一项代表一个系列的特殊选项及数据
例子:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>ceshi</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->


  </head>
  
  <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 --> 
  <!--<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
     -->
     
     <script type="text/javascript" src="res/skin/tjsn/plugin/echarts/echarts.js"></script>
     
    
     <script type="text/javascript">
         
        
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar',    // 使用柱状图就加载bar模块,按需加载
                'echarts/chart/line',    //使用折现图加载line模块,
                'echarts/chart/scatter',  //使用散点图加载scatter模块,
                'echarts/chart/pie',     //使用饼图加载pie模块,
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                var   option = {
   title : {
       text: '某楼盘销售情况',
       subtext: '纯属虚构'
   },
   tooltip : {
       trigger: 'axis'
   },
   legend: {
       data:['预购','成交']
   },
   toolbox: {
       show : true,
       feature : {
           mark : {show: true},
           dataView : {show: true, readOnly: true},
           magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
           restore : {show: true},
           saveAsImage : {show: true}
       }
   },
   calculable : false,
   xAxis : [        //X轴数据
       { 
           type : 'category',
           boundaryGap : true,
           data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
       }
   ],
   yAxis : [          //Y轴数据
       {
           type : 'value'
       }
   ],
   series : [       //驱动图表数据
       {
           name:'成交',
           type:'bar',     //设置 默认显示图表形状 bar
           smooth:true,
           itemStyle: {normal: {areaStyle: {type: 'default'}}},
           data:[10, 12, 21, 54, 260, 830, 710]
       },
       {
           name:'预购',
           type:'bar',     //设置 默认显示图表形状 bar
           smooth:true,
           itemStyle: {normal: {areaStyle: {type: 'default'}}},
           data:[30, 182, 434, 791, 390, 30, 10]
       }
   ]
};
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>
</html>             

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约