初见

Echarts.js数据可视化插件入门

2018-11-16  本文已影响0人  南客nk

最近在实习期间，接手了一个数据搜索项目，需要我从后台调取数据，并将之用折线图直方图显示出来，并且可以将多组数据绘制在同一张图表上进行比对。部门大佬推荐我使用Echarts.js这个库，原因是它免费、好学、功能齐全，作者是百度团队，有中文API中文社区可以参考。这么漂亮的库，不学一下也太亏了⑧


官网教程附在这里：5 分钟上手 ECharts

一、引入Echarts.js与初始化一个简单的图表

1、引入echarts.min.js

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

2、创建一个放置图标的容器，需要确定好宽高哦

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="chartBox" style=" width : 600px ;  height : 500px ; border : 1px solid #aaa"></div>
</body>

3、在<script>中调用echarts.init('dom元素')来初始化一个echarts实例。

<script type="text/javascript">
        var myChart = echarts.init(document.getElementById('myChart'));

4、接着创建一个对象option，里面存放着实例myChart的数据与配置

        var option = {
            title: {
                text: '我的第一个Echarts图表'    //图表的title
            },
            legend: {
                data:['销量','收入']     //图例,可以通过点击图例控制图表隐藏或显示某一指标
            },
            xAxis: {  //横坐标轴配置
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},   //纵坐标轴配置
            series: [{   //系列，这个数组可以存放多个对象，每个对象就是一组同质的数据，如销量、收入、支出。
                name: '销量',   //当前这组数据的名称
                type: 'bar',   //当前这组数据以什么样的形式展现。bar：条形图；line：折线图；pie：饼图，除此之外还有散点图、雷达图等等很多
                data: [5, 20, 36, 10, 10, 20]  //当前组数据具体值
            },{
                name : '收入',
                type : 'line',
                data : [10 , 20 , 40 , 20 , 25 , 15] 
            }]
        };

5、调用实例myChart的setOption()方法，将option这个对象指定到自己身上

        myChart.setOption(option);

6、接下来，一个简单的条形图就绘制成功了！


我的第一个Echarts图表

二、学习方式

下图是Echarts官网的实例库。比起翻看密密麻麻的文档，我更喜欢直接看实例，遇到不懂得配置再去查文档，这样比较有针对性的学习。


官网实例

实例网址奉上：
进入官方实例
进入用户上传实例
这上面两个网页中，每一个实例都可以打开，分析/修改源代码，查看效果，非常好用。

三、下面就进入实例分析环节吧~

实例分析一、某地区降水量与蒸发量统计图

点我进入实例地址
先介绍一下这份统计图要学习的内容：

下面是这幅图表的演示：

某地区降水量与蒸发量统计图
代码： 
option = {
    title : {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸发量','降水量']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markPoint : {
                data : [
                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};

分析：

1、title：标题组件。可以为图表设置主标题副标题。是一个对象，可以存放以下属性：
2、tooltip：提示框组件。当鼠标悬停在图表某一位置时，弹出气泡框显示当前位置的数据。
提示框组件

tooltip对象可以设置以下属性：

trigger设置为item时 trigger设置为axis时 trigger：'axis' 的正确操作
3、legend：图例组件

图例组件展现了不同系列（即不同组数据，如支出系列、收入系列等）的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
下图功能就是通过legend配置的：

legend控制哪些系列不显示
legend对象中配置的最重要的属性就是data，它是一个数组，用于存放图例所需数据，如图例的名字、图标：

与data属性平行的还有：

4、toolBox：工具栏组件，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

下图功能就是通过配置toolBox实现的：


toolBox实现工具栏

toolBox对象可以设置下面这些属性：

情形1：当不管xAxisIndex / yAxisIndex时，我们可以用鼠标随意划出一片区域进行放大，即dataZoom既控制X轴也控制Y轴：

xAxisIndex ` / `yAxisIndex 全部默认为true
情形2：当设置xAxisIndex : false 时，dataZoom就不再控制X轴了，鼠标划出的矩形区域宽度固定，高度跟随鼠标 xAxisIndex : false

情形3：当设置yAxisIndex : false 时，dataZoom就不再控制Y轴了，鼠标划出的矩形区域高度固定，宽度跟随鼠标

yAxisIndex : false
  1. magicType：图表类型切换工具。类型为object：
    • show：是否显示该工具，默认为true
      -type：启用的图表类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）。
      图示折线图与柱状图的堆叠模式 / 平铺模式：
折线图与柱状图的堆叠模式 / 平铺模式
5、xAxis与YAxis ：直角坐标系 grid 中的 X 轴Y轴
6、series：系列，它是一个数组，里面的元素是一个对象，每个对象就是一组数据的所有信息。

其实一个'系列'就是一组数据，每个系列通过 type 决定自己的图表类型。例如在一张图表上，同时显示降水量与温度，一般降水量以柱状图表示，温度以折线图表示。那就在series中存放两个对象，一个是降雨量，type设置为bar；一个是温度，type设置为line。
本例中的配置：

series : [
        {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },{.....}
       ]

markPoint : {
         data : [  { name: '某个坐标' , coord: [10, 20] }  ]
}

markLine与markPoint相似，就不到赘述了。markLine文档位置点这里

第一个实例就写到这儿吧，好像还是罗列了很多文档上的内容......

补充：最近整理了一些教程资源，包括慕课网的实战、金职位等等，当然有关Echarts.js的课程也少不了，如果有需要就联系我吧！wx：nanke951221


WechatIMG14.jpeg

大家加油，好好学习好好工作～

上一篇 下一篇

猜你喜欢

热点阅读