标签：att res tor 图表 版本 too rest 使用 value
这几天接触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="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>
标签：att res tor 图表 版本 too rest 使用 value
原文地址：http://www.cnblogs.com/guanwanli/p/7058509.html
