ECharts的使用在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。然后就可以通过 echart

ECharts的使用

通过标签方式直接引入构建好的 echarts 文件

<head>
 <meta charset="utf-8">
 <!-- 引入 ECharts 文件 -->
 <script src="echarts.min.js"></script>
</head>
</html>

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<html>
<head>
 <meta charset="utf-8">
 <title>ECharts</title>
 <!-- 引入 echarts.js -->
 <script src="echarts.min.js"></script>
</head>
<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
</body>
</html>

常用配置项的修改
1. toolbox：工具箱的显示和隐藏

 * show :true/false 显示和隐藏
  * left:"right"/"num值"  top:"bottom"/"num值" 控制显示位置
  * orient:"vertical"   对齐方式，默认水平
  * magicType：{ //是否进行类型切换
             show:true,
             type:["line","bar"]  //修改的类型
            }
  * restore    是否进行刷新
  * savaAsImage    是否进行刷新
  * dataview：数据修改

title：标题

> text：主标题
> subtext：副标题

tooltip：数据提示

> trigger: 'axis'  显示在轴上，默认是在线上显示

dataZoom：数据区域缩放

> show:true  默认为false
> start：20   开始位置为20%
> end： 80  结束位置为80% （默认100%）

xAxis：

> boundaryGap:true  起始结束两端是否留白
> data：function(){  //数据可以是数组，可以是函数处理的数组结构
    	var list = [];
    	for (var i = 1;i<30;i++){
    			list.push("2013-03-"+i);
    	}
    	return list
    }()  //函数需要立即执行

series：显示的数列

>name:""  显示几个数据
>  * type:""     图标类型