官方网站：http://echarts.baidu.com/
民间网站：http://fansunion.cn/echarts/
下载地址：https://codeload.github.com/ecomfe/echarts/zip/1.3.1
API&Doc：http://echarts.baidu.com/doc/doc.html
简要介绍
ECharts (Enterprise Charts 商业产品图表库)
提供商业产品常用图表库，底层基于ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现。
用法示例
1. 在线访问
http://echarts.baidu.com/doc/example.html
2. 下载查看
下载包的 doc/example目录 有很多示例。
小试牛刀
官方的例子，我看了下。引用了很多js和css文件，不够简明。
而我想要的是那种非常简介的或者是核心步骤的Example，于是我自己写了几个。
- <!DOCTYPE html>
- <html>
- <head>
- <meta content='text/html;charset=utf-8' http-equiv='content-type'>
- <title>Echarts图表Demo</title>
- <script src="js/esl/esl.js"></script>
- </head>
- <body>
- <div id="line" style="width:800px;height:600px;"> </div>
- <script type="text/javascript">
-
var fileLocation ='js/echarts';
//注意：这个echarts是一个echarts.js文件，是额外定义的 - require.config({
- paths:{
- echarts: fileLocation,
- 'echarts/chart/line': fileLocation,
- 'echarts/chart/bar': fileLocation,
- 'echarts/chart/pie': fileLocation
- }
- });
- // 作为入口
- require(
- [
- 'echarts',
- 'echarts/chart/line'
- ],
- displayChart
- );
- function displayChart(ec) {
- //折线图
- var lineChart = ec.init(document.getElementById('line'));
- var lineChartOtion = getLineChartOption();
- lineChart.setOption(lineChartOtion);
- }
- //获得Line图的选项和数据
- function getLineChartOption(){
- var lineChartOption={
- title : {
- text: '未来一周气温变化',
- subtext: '纯属虚构'
- },
- tooltip : {
- trigger: 'axis'
- },
- legend: {
- data:['最高气温','最低气温']
- },
- toolbox: {
- show : true,
- feature : {
- mark : true,
- dataView : {readOnly: false},
- magicType:['line', 'bar'],
- restore : true,
- saveAsImage : true
- }
- },
- calculable : true,
- xAxis : [
- {
- type : 'category',
- boundaryGap : false,
- data : ['周一','周二','周三','周四','周五','周六','周日']
- }
- ],
- yAxis : [
- {
- type : 'value',
- axisLabel : {
- formatter: '{value} °C'
- },
- splitArea : {show : true}
- }
- ],
- series : [
- {
- name:'最高气温',
- type:'line',
- itemStyle: {
- normal: {
- lineStyle: {
- shadowColor : 'rgba(0,0,0,0.4)'
- }
- }
- },
- data:[11, 11, 15, 13, 12, 13, 10]
- },
- {
- name:'最低气温',
- type:'line',
- itemStyle: {
- normal: {
- lineStyle: {
- shadowColor : 'rgba(0,0,0,0.4)'
- }
- }
- },
- data:[-2, 1, 2, 5, 3, 2, 0]
- }
- ]
- };
- return lineChartOption;
- }
- </script>
</body>
- </html>
下载地址：http://download.csdn.net/detail/fansunion/6629107(修改后的示例)
原文链接：http://FansUnion.cn/articles/3319(小雷网-FansUnion.cn)和http://blog.csdn.net/fansunion/article/details/17024055