echarts图表插件的使用总结

一、简介

1.echarts一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

二、下载

1.有精简版、完整版等等，可以在ECharts官网上下载，下载的文件为echarts.min.js或echarts.js等等。
在这里插入图片描述
2.下载完成后我们需要在HTML页面中引入echarts.min.js文件:


     <script src="js/echarts.min.js"></script>

三、使用方法

echarts的使用方法参考官网的配置项手册里面包含了一些属性的设置如title标题，工具栏等都有详细的说明，并以json格式显示:
在这里插入图片描述

四、实例

1.我们通过设置一个容器，如div，并且给这个这个容器设置固定的宽度和高度，echarts图表会自适应容器,并定义一个变量用来接收echarts.init(‘获取到的元素’)方法定义的图表:

<div class="lineDraw"></div>
    <script>
        var lineDraw = echarts.init(document.getElementsByClassName("lineDraw")[0]);
   </script>

2.我们可以通过一个option来接收echarts设置的配置项内容，这是一个案例:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>echarts</title>
    <script src="js/echarts.min.js"></script>
    <style>
        .lineDraw {
            height: 600px;
            width: 800px;
        }
    </style>
</head>

<body>
    <div class="lineDraw"></div>
    <script>
        var lineDraw = echarts.init(document.getElementsByClassName("lineDraw")[0]);
        option = {
            title: {
                x: 'left',
                text: '机票价格走势图',
                textStyle: {
					fontSize: '18',
					color: '#4c4c4c',
					fontWeight: 'bolder'
				}
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage:{
            			show:true
            		}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['12-01', '12-10', '12-20', '12-30', '01-01', '01-10', '01-20', '01-30', '02-01', '02-10',
                    '02-20', '02-30'
                ],
                axisLabel: {
                    interval: 0
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                    name: '北京-上海',
                    type: 'line',
                    data: [723, 642, 618, 745, 648, 649, 700, 745, 618, 765, 779, 600],
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: '#6be6c1'
                            }
                        }
                    },
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    }
                },
                {
                    name: '北京-长沙',
                    type: 'line',
                    data:[443, 352, 418, 345, 448, 349, 300, 352, 418, 445, 348, 449, 300],
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: '#626c91'
                            }
                        }
                    },
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    }
                },
                {
                    name: '北京-深圳',
                    type: 'line',
                    data: [943, 752, 718, 885, 848, 890, 900, 972, 998, 825, 888, 949, 800],
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: '#3fb1e3'
                            }
                        }
                    },
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    }
                }
            ]
        };
        lineDraw.setOption(option);
    </script>
</body>

</html>

3.option配置项根据实际情况设置好后直接通过定好好的变量lineDraw.setOption(option)方法调用即可，效果如下图所示:
在这里插入图片描述
4.echarts官网给我提供了更多的实例，请参考官方实例
更多参考: echarts教程 echarts在线API 地图