前言

• 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.绘制一个简单的柱状图

 <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.运行结果