数据可视化---ECharts

前言

  • ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。 ECharts

  • 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种设备,可随时随地任性展示。

  • 底层依赖于轻量级的Canvas类库ZRender,基于BSD开原协议,是一款非常优秀的可视化前端框架。


一、ECharts下载

1.首先在官网 选择合适的下载版本

            官网链接:Apache ECharts

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述         

二、使用步骤

1.引入Echarts.js类库

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

2.绘制一个简单的柱状图

         1.准备一个DOM容器

    <style>
        div {
            width: 600px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
    <div></div>

          2.制作简单的柱形图

 <script>
            //获取div容器
            var div = document.querySelector('div');
            //初始化echarts的实例对象
            var myCharts = echarts.init(div);

            var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台'];
            var yDataArr = [88, 72, 32, 58, 94, 53];
            //准备配置项
            var option = {
                title: {
                    text: '语文成绩',
                    textStyle: {
                        color: 'green'
                    },
                    borderWidth: 5,
                    borderColor: 'blue',
                    borderRadius: 5
                },
                xAxis: {
                    type: 'category',
                    data: xDataArr
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '语文',
                    type: 'bar',
                    color: 'pink',
                    data: yDataArr
                }]
            }
            // 将配置项设置给echars实例
            myCharts.setOption(option);
        </script>

          3.运行结果
在这里插入图片描述


总结

         以上就是关于制作一个简单的数据可视化项目柱状图的全部内容,希望对大家的学习有所帮助,欢迎评论交流。能get到知识点不要忘了关注点个赞~ 拒绝白嫖从我们做起hh~

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值