Echarts组件使用

Echarts组件使用

一.script标签引入echarts.js文件

//引入echarts
<script src="js/echarts.js"></script>

二.html页面body放置div -- Echarts渲染容器

<div id="myChart" style="width: 600px;height:400px;"></div>

三.script标签内对Echarts初始化并配置

	//初始化Echarts
        var myChart = echarts.init(document.getElementById('myChart'));
        //指定图标的配置项和数据，改变所有图表数据
        var option = {
            legend: {        // 图例配置
                padding: 5,  // 图例内边距，单位px，默认上下左右内边距为5
                itemGap: 10,  // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
                data: ['ios', 'android']
            },
            tooltip: {        // 气泡提示配置
                trigger: 'item',  // 触发类型，默认数据触发，可选为：'axis'
            },
            xAxis: [      // 直角坐标系中横轴数组
                {
                    type: 'category', // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
                    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                }
            ],
            yAxis: [   // 直角坐标系中纵轴数组
                {
                    type: 'value',  // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
                    boundaryGap: [0.1, 0.1],  // 坐标轴两端空白策略，数组内数值代表百分比
                    splitNumber: 4    // 数值轴用，分割段数，默认为5
                }
            ],
            series: [
                {
                    name: 'ios',  // 系列名称
                    type: 'line',  // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
                    data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
                },
                {
                    name: 'android',  // 系列名称
                    type: 'line',     // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
                    data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
                }
            ]
        };
        //实例化的echarts图表，在DOM中渲染图标
        myChart.setOption(option);

• 常用配置项的修改

  1. toolbox：工具箱的显示和隐藏

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

2. title：标题

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

3. tooltip：数据提示

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

4. dataZoom：数据区域缩放

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

5. xAxis：

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

6. series：显示的数列

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