Echarts 5.0 数据图表

一：简介Echarts数据图表

　　数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

其中Echarts包含折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表

1：Echarts介绍

　　ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender ，提供直观，
交互丰富，可高度个性化定制的数据可视化图表。
①：开源免费
　　它是开源免费的，也就是我们可以免费的使用 ECharts ，不需要缴纳任何的费用
②：功能丰富
　　它的功能非常的丰富，提供了各种各样的图表，支持各种各样的定制, 满足各种需求，比如折线图、柱状图、饼图、K线图等. 
在他的官方示例中, 提供了上百种图表, 可以用 只有你想不到, 没有它做不到 这句话来形容
③：社区活跃
　　ECharts 的社区非常活跃，意味着你可以和很多开发者讨论，遇到了 ECharts 中不会的问题，也很容易找到解决办法
④多种数据的支持
　　可视化的含义就是将数据通过更加直观的图表的方式来呈现。图表只是一种呈现方式。最核心的其实是数据。 ECharts 对数据格式
的支持也是非常友好的。 ECharts 能够支持常见的 key-value 数据格式，还能支持二维表，或者 TypedArray 格式的数据
⑤流数据的支持
　　对于超大的数据量而言， 数据本身的体量可能就非常消耗资源, 而 ECharts 可以支持对流数据的动态渲染，加载多少数据就渲染
多少数据，省去了漫长的数据加载的等待时间, 他还提供了增量渲染的技术, 只渲染变化的数据, 提高系统的资源利用.
⑥：移动端的优化
⑦：跨平台
⑧：酷炫的特效,
⑨：数据的三维可视化

2：Echarts5.0基本说明

　　随着时间的推进，Echarts也再不断更新，到 Echarts5.0 的时候是个版本的大突破，更新了一些动态图表，也对以前版本的一些属性进行了更改，本文以5.0的的方式为大家讲解，再了解本文后，再次深入学习，官方API 是个很不错的选择

3：Echarts快速入门 Echarts.js下载

　　入门只需五步：引入echarts.js==>创建一个呈现图表的盒子==>初始化echarts==>准备配置项==>配置项设置到echarts实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>入门案例</title>
</head>
<body>
<!-- 创建容器 -->
<div id="main" style="width: 700px; height: 250px; border: 1px dashed #f69"></div>
<!-- 导入Echarts.js -->
<script src="./js/echarts.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.querySelector("#main"));
    //指定图表的配置项和数据（重要的全在这里面）
    let option = {
        //标题组件
        title: {show:true, text: '入门示例'},
        //图例组件。
        legend: {
            show: true,
            data: ["语文", "数学"]
        },
        //直角坐标系内绘图网格
        grid:{left:'5%', top:'15%', right:'5%', bottom:'10%'},
        //工具箱
        toolbox:{
            feature:{
                saveAsImage:{show:true, type:'png', name:'图表图片'}
            }
        },
        //直角坐标系 中的 x 轴,
        xAxis: {
            show: true,
            type:'category',
            data: ["张三", "李四", "王二", "麻子", "蚂蚁小哥"]
        },
        //直角坐标系 中的 y 轴,
        yAxis: {show: true, type:'value'},
        //系列列表。
        series: [
            {name: "语文", type: "bar", data: [82, 60, 45, 77, 86]},
            {name: "数学", type: "bar", data: [82, 60, 45, 77, 86]}
        ],
    };
    /**上图中show:true，大部分默认就为true，因为入门实例，让我们指知道可以设置此组件的显示/隐藏*/
    //把刚才实例好的echarts对象里面设置数据和配置
    myChart.setOption(option);
    //自适应，这里我没设置自适应页面，这个了解就行，后期自适应的话要设置
    window.addEventListener("resize", () => {
        myChart.resize();
    });
</script>
</body>
</html>

Echarts入门案例