echart图表的各种参数介绍

来源：互联网发布：淘宝美工宣传视频编辑：程序博客网时间：2024/05/17 08:19
转载：http://blog.csdn.net/zou128865/article/details/42802671    <%@ 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>ECharts实例</title>        </head>        <body>          <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->          <!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->          <div id="mainBar" style="height:500px;border:1px solid #ccc;padding:10px;"></div>                    <!--Step:2 Import echarts.js-->          <!--Step:2 引入echarts.js-->          <script src="js/echarts.js"></script>                    <script type="text/javascript">          // Step:3 conifg ECharts's path, link to echarts.js from current page.          // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径          require.config({              paths: {                  echarts: './js'              }          });                    // Step:4 require echarts and use it in the callback.          // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径          require(              [                  //这里的'echarts'相当于'./js'                  'echarts',                  'echarts/chart/bar',                  'echarts/chart/line',              ],              //创建ECharts图表方法              function (ec) {                  //--- 折柱 ---                      //基于准备好的dom,初始化echart图表                  var myChart = ec.init(document.getElementById('mainBar'));                  //定义图表option                  var option = {                      //标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题                      title: {                          //主标题文本，'\n'指定换行                          text: '2013年广州降水量与蒸发量统计报表',                          //主标题文本超链接                          link: 'http://www.tqyb.com.cn/weatherLive/climateForecast/2014-01-26/157.html',                          //副标题文本，'\n'指定换行                          subtext: 'www.stepday.com',                          //副标题文本超链接                          sublink: 'http://www.stepday.com/myblog/?Echarts',                          //水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）                          x: 'left',                          //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）                          y: 'top'                      },                      //提示框，鼠标悬浮交互时的信息提示                      tooltip: {                          //触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'                          trigger: 'axis'                      },                      //图例，每个图表最多仅有一个图例                      legend: {                          //显示策略，可选为：true（显示） | false（隐藏），默认值为true                          show: true,                          //水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）                          x: 'center',                          //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）                          y: 'top',                          //legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应                          data: ['蒸发量','降水量']                      },                      //工具箱，每个图表最多仅有一个工具箱                      toolbox: {                          //显示策略，可选为：true（显示） | false（隐藏），默认值为false                          show: true,                          //启用功能，目前支持feature，工具箱自定义功能回调处理                          feature: {                              //辅助线标志                              mark: {show: true},                              //dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退                              dataZoom: {                                  show: true,                                   title: {                                      dataZoom: '区域缩放',                                      dataZoomReset: '区域缩放后退'                                  }                              },                              //数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能                              dataView: {show: true, readOnly: true},                              //magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换                              magicType: {show: true, type: ['line', 'bar']},                              //restore，还原，复位原始图表                              restore: {show: true},                              //saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'                              saveAsImage: {show: true}                          }                      },                      //是否启用拖拽重计算特性，默认关闭(即值为false)                      calculable: true,                      //直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值                      //横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型                      xAxis: [                          {                              //显示策略，可选为：true（显示） | false（隐藏），默认值为true                              show: true,                              //坐标轴类型，横轴默认为类目型'category'                              type: 'category',                              //类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行                              data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']                          }                      ],                      //直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值                      //纵轴通常为数值型，但条形图时则纵轴为类目型                      yAxis: [                          {                              //显示策略，可选为：true（显示） | false（隐藏），默认值为true                              show: true,                              //坐标轴类型，纵轴默认为数值型'value'                              type: 'value',                              //分隔区域，默认不显示                              splitArea: {show: true}                          }                      ],                                            //sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象                      series: [                          {                              //系列名称，如果启用legend，该值将被legend.data索引相关                              name: '蒸发量',                              //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。                              type: 'bar',                              //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值                              data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],                              //系列中的数据标注内容                              markPoint: {                                  data: [                                      {type: 'max', name: '最大值'},                                      {type: 'min', name: '最小值'}                                  ]                              },                              //系列中的数据标线内容                              markLine: {                                  data: [                                      {type: 'average', name: '平均值'}                                  ]                              }                          },                          {                              //系列名称，如果启用legend，该值将被legend.data索引相关                              name: '降水量',                              //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。                              type: 'bar',                              //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值                              data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],                              //系列中的数据标注内容                              markPoint: {                                  data: [                                      {type: 'max', name: '最大值'},                                      {type: 'min', name: '最小值'}                                  ]                              },                              //系列中的数据标线内容                              markLine: {                                  data: [                                      {type: 'average', name: '平均值'}                                  ]                              }                          }                      ]                  };                                        //为echarts对象加载数据                              myChart.setOption(option);              }          );          </script>        </body>      </html>
1 0