图表选项，包含图表实例任何可配置选项： 公共选项 ， 组件选项 ， 数据选项
名称 描述 {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>