首页 > 代码库 > Echarts 学习

Echarts 学习

这几天接触Echarts,这是一个开源项目,采用JavaScript实现图表展示,功能十分强大。

官网 http://echarts.baidu.com/echarts2/index.html 最新版本 http://echarts.baidu.com/index.html

很多介绍都在那里。

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <title>ECharts</title>
  6 </head>
  7 <body>
  8     <div id="main" style="height:400px">
  9 
 10     </div>
 11 </body>
 12 </html>
 13 <script src=http://www.mamicode.com/"echarts.js"></script>
 14 <script type="text/javascript">
 15     //官网最简单例子
 16     //配置路径
 17     require.config(
 18     {
 19         paths: {
 20             echarts: http://echarts.baidu.com/build/dist
 21         }
 22     })
 23     //使用
 24     require(
 25         [
 26             echarts,
 27             echarts/chart/bar,// 使用柱状图就加载bar模块,按需加载
 28             echarts/chart/line,
 29         ],
 30         function(ec)
 31         {
 32             var myChart = ec.init(document.getElementById(main)); 
 33 
 34             var option = {
 35                 title: {
 36                     //标题
 37                     text: 未来一周气温变化,
 38                     //副标题
 39                     subtext: 纯属虚构
 40                 },
 41                 //横坐标
 42                 tooltip: {
 43                     trigger: axis
 44                 },
 45                 //数据说明
 46                 legend: {
 47                     data: [最高气温, 最低气温]
 48                 },
 49                 //工具箱
 50                 toolbox: {
 51                     show: true,
 52                     feature: {
 53                         //显示工具箱
 54                         mark: { show: true },
 55                         //数据按钮,点击后显示数据,并只读
 56                         dataView: { show: true, readOnly: false },
 57                         //可以切换线型图和柱状图
 58                         magicType: { show: true, type: [line, bar] },
 59                         //刷新
 60                         restore: { show: true },
 61                         //保存图片
 62                         saveAsImage: { show: true }
 63                     }
 64                 },
 65                 //是否启用拖拽重计算特性,默认关闭
 66                 calculable: true,
 67                 //X坐标内容
 68                 xAxis: [
 69                     {
 70                         //默认值 ‘category‘ | ‘value‘ | ‘time‘ | ‘log‘  坐标轴类型,横轴默认为类目型‘category‘,纵轴默认为数值型‘value‘ 
 71                         type: category,
 72                         //类目起始和结束两端空白策略,见下图,默认为true留空,false则顶头 
 73                         boundaryGap: false,
 74                         //X数据内容
 75                         data: [周一, 周二, 周三, 周四, 周五, 周六, 周日]
 76                     }
 77                 ],
 78                 yAxis: [
 79                     {
 80                         type: value,
 81                         //Y数据内容
 82                         axisLabel: {
 83                             formatter: {value} °C
 84                         }
 85                     }
 86                 ],
 87                 series: [
 88                     //最高气温数据图
 89                     {
 90                         name: 最高气温,
 91                         type: line,
 92                         data: [11, 11, 15, 13, 12, 13, 10],
 93                         //辅助点,显示最大最小点
 94                         markPoint: {
 95                             data: [
 96                                 { type: max, name: 最大值 },
 97                                 { type: min, name: 最小值 }
 98                             ]
 99                         },
100                         //辅助线
101                         markLine: {
102                             data: [
103                                 { type: average, name: 平均值 }
104                             ]
105                         }
106                     },
107                     //最低气温数据图
108                     {
109                         name: 最低气温,
110                         type: line,
111                         data: [1, -2, 2, 5, 3, 2, 0],
112                         //辅助点,显示最大最小点
113                         markPoint: {
114                             data: [
115                                 { name: 周最低, value: -2, xAxis: 1, yAxis: -1.5 }
116                             ]
117                         },
118                         //辅助线
119                         markLine: {
120                             data: [
121                                 { type: average, name: 平均值 }
122                             ]
123                         }
124                     }
125                 ]
126             };
127 
128             // 为echarts对象加载数据 
129             myChart.setOption(option);
130         }
131     )
132 </script>

 

Echarts 学习