数据可视化---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~