EChart.js简单入门-优快云博客

本文详细介绍ECharts图表库的使用方法，包括初始化配置、参数设置、动态数据绑定及事件处理等内容。此外，还介绍了如何实现图表在移动端的自适应布局。

一、几种统计图库：

1.MSChart : 这个是Visual Studio里的自带控件，使用比较简单，不过数据这块需要在后台绑定。

2.ichartjs : 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。支持饼图、环形图、折线图、面积图、柱形图、条形图等。

3.Chart.js : 也是一款基于HTML5的图形库和ichartjs整体类似。不过Chart.js的教程文档没有ichartjs的详细。不过感觉在对于移动的适配上感觉比ichartjs要好一点。

4.Echart.js : 这也是一款基于HTML5的图形库。图形的创建也比较简单，直接引用Javascript即可。

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

二、EChart.js简单使用

1.引入ＪＳ文件

<script type="text/javascript" src="js/echarts.js"></script>  

下载方法：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
复制代码

２.准备一个放图表的工具

<div id="chartmain" style="width:600px; height: 400px;"></div>
复制代码

３.设置参数，初始化图表

<script type="text/javascript">

    //指定图标的配置和数据
    var option = {
        title:{
            text:'ECharts 数据统计'
        },
        tooltip:{},
        legend:{
            data:['用户来源']
        },
        xAxis:{
            data:["Android","IOS","PC","Ohter"]
        },
        yAxis:{

        },
        series:[{
            name:'访问量',
            type:'line',
            data:[500,200,360,100]
        }]
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);
	</script>
复制代码

柱状图其实也很简单，只要修改一个参数就可以了。把series里的type 值修改为"bar"

饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标，数据绑定上也是采用value 和name对应的形式。

    var option = {
        title:{
            text:'ECharts 数据统计'
        },            
        series:[{
            name:'访问量',
            type:'pie',    
            radius:'60%', 
            data:[
                {value:500,name:'Android'},
                {value:200,name:'IOS'},
                {value:360,name:'PC'},
                {value:100,name:'Ohter'}
            ]
        }]
    };
复制代码

三、详细讲解参数配置

1.初始化 echarts.init(dom)

2.实例方法 http://echarts.baidu.com/echarts2/doc/doc.html#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95

3.选项 option

1.xAxis : [] 表示x轴，数组对象，其下至少有一个对象。（没有的话，效果：垂直于坐标原点的y轴）

2.yAxis : [] 表示y轴，数组对象，其下可以有空对象。（没有的话，效果：垂直于坐标原点的x轴；其下是空对象时，没有影响）

3.seies : [] 驱动图表生成的数据内容数组，至少有一个对象。（当没有series的时候，是没有数据的，效果展示为空白）

4.title ： {} 标题控件

5.tooltip : {} 鼠标悬浮交互时的信息提示

6.legend : {} 图表的图例

7.backgroundColor : 背景色

8.color : 数值系列的颜色列表

9.itemStyle ：设置阴影，透明度，颜色，边框颜色，边框宽度...

itemStyle: {

// 阴影的大小
shadowBlur: 200,
// 阴影水平方向上的偏移
shadowOffsetX: 0,
// 阴影垂直方向上的偏移
shadowOffsetY: 0,
// 阴影颜色
shadowColor: 'rgba(0, 0, 0, 0.5)'
复制代码

}

......

组件选项

10.visiualMap 视觉映射（将数值的大小映射到阴暗度上）

visualMap: {

// 不显示 visualMap 组件，只用于明暗度的映射
show: false,
// 映射的最小值为 80
min: 80,
// 映射的最大值为 600
max: 600,
inRange: {
    // 明暗度的范围是 0 到 1
    colorLightness: [0, 1]
}
复制代码

}

11.dataZoom 数据区域缩放与toolbox.feature.dataZoom同步，仅对直角坐标系图表有效。

......

http://echarts.baidu.com/echarts2/doc/doc.html#%E9%80%89%E9%A1%B9

四、动态数据绑定

简单的统计表已经可以生成，不过之前图标数据都是直接写在参数里面的，而实际使用中，我们的数据一般都是异步读取的。EChart.js对于数据异步读取这块提供了异步加载的方法。

绑定多组数据：

很多时候需要展示的数据不单单是一组数据，很多时候会进行一个数据对比。这个时候只需要在series中增加一组数据，legend中添加一下这个数据组的name

    <!DOCTYPE html>
    <html>
    <head>
        <title>ECharts.js 数据绑定</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/echarts.js"></script>
    </head>
    <body>
        <div id="chartmain" style="width:600px; height: 400px;"></div>
        <script type="text/javascript">
            //指定图标的配置和数据
            var option = {
                title:{
                    text:'ECharts 数据统计'
                },
                legend:{
                    data:['访问量','用户量']
                },
                xAxis:{
                    data:["Android","IOS","PC","Other"]
                },
                yAxis:{},
                series:[
                {
                    name:'访问量',
                    type:'bar',
                    data:[180,420,333,83]
                },
                {
                    name:'用户量',
                    type:'bar',
                    data:[125,330,230,60]
                }
                ]
            };
            //初始化echarts实例
            var myChart = echarts.init(document.getElementById('chartmain'));
    
            //使用制定的配置项和数据显示图表
            myChart.setOption(option);
        </script>
    </body>
    </html>
复制代码

数据异步加载

EChart中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

绑定数据的方式有两种，一种是写写好一些图表参数，然后数据留空，然后在异步读取数据的时候，绑定数据。

还有一种就是直接异步读取数据的时候同时设置图表参数和数据绑定。

data.json文件内容： {"name":["Android","IOS","PC","Other"],"data":[420,200,360,100]}

第一种：异步加载的时候设置图表参数和绑定数据

<script type="text/javascript">        
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));        
    //异步加载的配置项和数据显示图表
    $.get('data.json').done(function (data) {
        data = eval('('+data+')');            
        myChart.setOption({
            title:{
                text:'ECharts 异步加载数据'
            },
            tooltip:{},
            legend:{
                data:['访问量']
            },
            xAxis:{
                data:data.name
            },
            yAxis:{},
            series:[
                {
                    name:'访问量',
                    type:'bar',
                    data:data.data
                }
            ]
        })
    })
</script>
复制代码

第二种：先设置图表参数，后绑定数据

<script type="text/javascript">        
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));        
    //设置图标配置项
    myChart.setOption({
        title:{
            text:'ECharts 异步加载数据'
        },
        tooltip:{},
        legend:{
            data:['访问量']
        },
        xAxis:{
            data:[]
        },
        yAxis:{},
        series:[
            {
                name:'访问量',
                type:'bar',
                data:[]
            }
        ]
    })
    //异步加载数据
    $.get('data.json').done(function (data) {
        data = eval('('+data+')');            
        myChart.setOption({                
            xAxis:{
                data:data.name
            },                
            series:[
                {    
                    //根据名字对应到相应的系列
                    name:"访问量",
                    data:data.data
                }
            ]
        })
    })
</script>
复制代码

因为是异步加载，所以有时候数据加载会慢，或者延迟。在数据没有加载前，图表这样的。面对这样的图表，肯定会觉得这是没有数据吗，还是图表有问题.对于这块ECharts增加了一个加载动画。

//打开loading动画
    myChart.showLoading();
    //加载数据函数
    function bindData(){
        //为了效果明显，我们做了延迟读取数据
        setTimeout(function(){                
            //异步加载数据
            $.get('data.json').done(function (data) {                    
                //获取数据后，隐藏loading动画
                myChart.hideLoading();
                data = eval('('+data+')');            
                myChart.setOption({
                    xAxis:{
                        data:data.name
                    },
                    series:[
                        {
                            //根据名字对应到相应的系列
                            name:"访问量",
                            data:data.data
                        }
                    ]
                })
            })
        },2000)
    }
    
    bindData();   
复制代码

五、ECharts中的事件和行为

在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。

myChart.on('click', function (params) {

	// 控制台打印数据的名称	
        console.log(params.name);
复制代码

});

ECharts中事件类型分为两种类型：

一、用户鼠标操作点击，或者 hover 图表的图形时触发的事件

二、用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 'legendselectchanged' 事件（这里需要注意切换图例开关是不会触发'legendselected'事件的），数据区域缩放时触发的 'datazoom' 事件等等。

ECharts 支持常规的鼠标事件类型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 事件。例：点击柱状图后打开相应的百度搜索页面

// 基于准备好的dom，初始化ECharts实例 var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
复制代码

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);
复制代码

// 处理点击事件并且跳转到相应的百度搜索页面

myChart.on('click', function (params) {
    window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
复制代码

所有的鼠标事件包含参数 params，这是一个包含点击图形的数据信息的对象，如下格式： { // 当前点击的图形元素所属的组件名称，

// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。

componentType: string,

// 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
seriesType: string,

// 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
seriesIndex: number,

// 系列名称。当 componentType 为 'series' 时有意义。
seriesName: string,

// 数据名，类目名
name: string,

// 数据在传入的 data 数组中的 index
dataIndex: number,

// 传入的原始数据项
data: Object,

// sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
// dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
// 其他大部分图表中只有一种 data，dataType 无意义。
dataType: string,

// 传入的数据值
value: number|Array

// 数据图形的颜色。当 componentType 为 'series' 时有意义。
color: string
复制代码

}

六、移动端自适应

ECharts 工作在用户指定高宽的 DOM 节点（容器）中。ECharts 的『组件』和『系列』都在这个 DOM 节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。

另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 CSS Media Query 的自适应能力。

大部分【组件】和【系列】会遵循两种定位方式：

left/right/top/bottom/width/height 定位方式：

这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。

绝对值单位是浏览器像素（px），用 number 形式书写（不写单位）。例如 {left: 23, height: 400}。

百分比表示占 DOM 容器高宽的百分之多少，用 string 形式书写。例如 {right: '30%', bottom: '40%'}。

位置描述

可以设置 left: 'center'，表示水平居中。

可以设置 top: 'middle'，表示垂直居中。

这六个量的概念，和 CSS 中六个量的概念类似：

left：距离 DOM 容器左边界的距离。

right：距离 DOM 容器右边界的距离。

top：距离 DOM 容器上边界的距离。

bottom：距离 DOM 容器下边界的距离。

width：宽度。

height：高度。

在横向，left、right、width 三个量中，只需两个量有值即可，因为任两个量可以决定组件的位置和大小，例如 left 和 right 或者 right 和 width 都可以决定组件的位置和大小。纵向，top、bottom、height 三个量，和横向类同不赘述。

center / radius 定位方式：

center

是一个数组，表示 [x, y]，其中，x、y可以是『绝对值』或者『百分比』，含义和前述相同。

radius

是一个数组，表示 [内半径, 外半径]，其中，内外半径可以是『绝对值』或者『百分比』，含义和前述相同。在自适应容器大小时，百分比设置是很有用的。

Media Query

Media Query 提供了『随着容器尺寸改变而改变』的能力。

要在 option 中设置 Media Query 须遵循如下格式：

option = {

baseOption: { // 这里是基本的『原子option』。
    title: {...},
    legend: {...},
    series: [{...}, {...}, ...],
    ...
},
media: [ // 这里定义了 media query 的逐条规则。
    {
        query: {...},   // 这里写规则。
        option: {       // 这里写此规则满足下的option。
            legend: {...},
            ...
        }
    },
    {
        query: {...},   // 第二个规则。
        option: {       // 第二个规则对应的option。
            legend: {...},
            ...
        }
    },
    {                   // 这条里没有写规则，表示『默认』，
        option: {       // 即所有规则都不满足时，采纳这个option。
            legend: {...},
            ...
        }
    }
]
复制代码

};

query:

每个query类似于这样

{
	minWidth: 200,
	maxHeight: 300,
	minAspectRatio: 1.3
 }
复制代码

现在支持三个属性：width、height、aspectRatio（长宽比）。

每个属性都可以加上 min 或 max 前缀。比如，minWidth: 200 表示『大于等于200px宽度』。两个属性一起写表示『并且』，比如：{minWidth: 200, maxHeight: 300} 表示『大于等于200px宽度，并且小于等于300px高度』。

option： media中的 option 既然是『原子 option』，理论上可以写任何 option 的配置项。但是一般我们只写跟布局定位相关的，例如截取上面例子中的一部分 query option： media: [

...,
{
    query: {
        maxAspectRatio: 1           // 当长宽比小于1时。
    },
    option: {
        legend: {                   // legend 放在底部中间。
            right: 'center',
            bottom: 0,
            orient: 'horizontal'    // legend 横向布局。
        },
        series: [                   // 两个饼图左右布局。
            {
                radius: [20, '50%'],
                center: ['50%', '30%']
            },
            {
                radius: [30, '50%'],
                center: ['50%', '70%']
            }
        ]
    }
},
{
    query: {
        maxWidth: 500               // 当容器宽度小于 500 时。
    },
    option: {
        legend: {
            right: 10,              // legend 放置在右侧中间。
            top: '15%',
            orient: 'vertical'      // 纵向布局。
        },
        series: [                   // 两个饼图上下布局。
            {
                radius: [20, '50%'],
                center: ['50%', '30%']
            },
            {
                radius: [30, '50%'],
                center: ['50%', '75%']
            }
        ]
    }
},
...
复制代码

]

多个 query 被满足时的优先级：

注意，可以有多个 query 同时被满足，会都被 mergeOption，定义在后的后被 merge（即优先级更高）。

默认 query：

如果 media 中有某项不写 query，则表示『默认值』，即所有规则都不满足时，采纳这个option。容器大小实时变化时的注意事项：

在不少情况下，并不需要容器DOM节点任意随着拖拽变化大小，而是只是根据不同终端设置几个典型尺寸。

但是如果容器DOM节点需要能任意随着拖拽变化大小，那么目前使用时需要注意这件事：某个配置项，如果在某一个 query option 中出现，那么在其他 query option 中也必须出现，否则不能够回归到原来的状态。（left/right/top/bottom/width/height 不受这个限制。）