用 ECharts 做出漂亮的数据统计图

头像
Winn
     福建
    阅读 6 分钟
    头图

    在没发现 ECharts 这款神器的时候，之前所做的数据统计图只能自个纯手写，倒也是可以实现，只不过特别的费时。后来无意中在网上瞄到 ECharts 这款专门用来生成数据图表的插件，便尝试了一下，那感觉真的不要太爽！

    官方介绍

    ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

    获取 ECharts

    1、下载地址

    https://github.com/apache/inc...

    2、点击红色箭头按钮，将压缩包下载下来

    图片

    3、echarts 库放在解压后文件夹中的 dist 目录里

    图片
    将整个 dist 目录复制到你的项目中去，可重命名为 echarts

    备注：若不想下载 ECharts 库文件，可在头部直接引用 bootcdn 上的 echarts 文件，地址为：https://cdn.bootcss.com/echar...

    绘制数据图表

    1、柱状图

    图片
    柱状图效果预览

    代码实现

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据统计图：柱状图</title>
    <!-- 引入 ECharts 文件 这里选择min.js压缩版的echarts -->
    <script src="echarts/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: '2014-2019年 前端人均工资'
            },
            tooltip: {},//提示框组件（鼠标移动到数字表时触发）
            xAxis: {  //x轴
                data: ["2014年","2015年","2016年","2017年","2018年","2019年"]
            },
            yAxis: {},//y轴 内容会自动从以下的series.data 中获取
            series: [{
                name: '人均工资',
                type: 'bar', //类型为：柱状图
                data: [3800, 4600, 5100, 5800, 6300, 7300] //x轴项目对应的数据
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    </script>

</body>
</html>

    2、折线图

    图片
    折线图效果预览

    代码实现

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据统计图：折线图</title>
    <!-- 引入 ECharts 文件 这里选择min.js压缩版的echarts -->
    <script src="echarts/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: '未来一周气温变化'
            },
            tooltip: {
                trigger: 'axis'
            },

            xAxis:  {
                type: 'category',
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value',
                axisLabel: {  //坐标轴刻度标签的相关设置。
                    formatter: '{value} °C'  // 使用字符串模板，模板变量为刻度默认标签 {value}
                }
            },
            series: [
                {
                    name:'最高气温',
                    type:'line',
                    data:[11, 11, 15, 13, 12, 13, 10],
                },
                {
                    name:'最低气温',
                    type:'line',
                    data:[1, -2, 2, 5, 3, 2, 0],

                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    </script>

</body>
</html>

    3、饼图

    图片
    饼图效果预览

    代码实现

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据统计图：饼图</title>
    <!-- 引入 ECharts 文件 这里选择min.js压缩版的echarts -->
    <script src="echarts/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: '某公司年龄阶段的员工占比',
                x:'center'//水平居中
            },
            tooltip : {//提示框组件。
                trigger: 'item',  //'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                formatter: "{a} <br/>{b} : {c} ({d}%)" //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            },
            series : [
                {
                    name: '年龄占比',
                    type: 'pie',
                    radius : '55%',//饼图的半径
                    center: ['50%', '60%'],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                    data:[
                        {value:80, name:'20-25岁'},
                        {value:30, name:'26-30岁'},
                        {value:20, name:'31-35岁'},
                        {value:8, name:'36-40岁'},
                        {value:5, name:'41岁以上'}
                    ],
                    itemStyle: {//图形样式。
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    </script>

</body>
</html>

    结语

    以上绘制的图表是数据图中用的频率较高的三种。不仅如此，ECharts 还可用于地理数据可视化的地图，用于关系数据可视化的关系图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，并且支持图与图之间的混搭。更多有关 ECharts 的使用方法，可参考 ECharts 的官方文档：
    https://echarts.baidu.com/ind...

    最后

    觉得文章不错的，给我点个赞哇，关注一下呗！
    技术交流可关注微信公众号【GitWeb】，加我好友一起探讨
    微信交流群：加好友（备注思否）邀你入群，抱团学习共进步

    图片

    前端css3javascripthtml5html
    Winn
    2.7k 声望2.9k 粉丝

    国内头部医美企业全栈开发者

    « 上一篇
    PHP将url生成二维码，扫码可跳转
    下一篇 »
    ChatGPT会如何影响我们的工作生活和人力资源需求

    引用和评论

    推荐阅读
    头像
    集齐大量开源项目的网站，了解一下吧

    Winn赞 4阅读 1.6k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.4k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 4k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.7k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.2k评论 3

    0 条评论
    得票最新