ECharts的简单入门

原创

wx59e5b1fcc2693 2021-07-13 16:34:51 ©著作权

©著作权归作者所有：来自51CTO博客作者wx59e5b1fcc2693的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言：

如果我们开发的项目中涉及到大量的数据分析，干巴巴的数据展示肯定不是用户想看到的，怎么把数据更加形象生动的展示给用户，就变得十分重要了。那么就不得不说今天的主角ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。这篇文章通过一个简单的demo,带你初步认识ECharts。

正文：

一、浏览器画图的原理

基于HTML和JavaScript的浏览器绘图方式，依赖于各个浏览器内部所提供的图形引擎。所以针对不同浏览器就诞生了不同的网络图形标准。

目前主流的网络图形标准包括两种：

1.SVG：SVG 是由 W3C 制定的同样基于 XML 的矢量图形描述语言，SVG 元素是指示如何绘制图像的一些指令，由图形引擎解释这些指令，把 SVG 图像在浏览器上显示出来。使用 SVG 可以在网页上显示出各种各样的高质量的矢量图形，其最明显的特征是灵活的文件格式，矢量图形、位图和文字三部分共同组成一个 SVG 图形，并具备对运行中的 Web 页面图像进行实时修改的能力。

2.Canvas: Canvas 是指 HTML 5 中新加入的 canvas 元素，最初由 Apple 的 Safari 浏览器引入，而后受到 Firefox 和 Opera 的广泛支持。Canvas 元素相对 SVG 的一个重要不同在于，canvas 提供了通过 JavaScript 绘制图形的方法，每一个 canvas 元素都有一个上下文，在其中可以绘制任意图形；而 SVG 使用 XML 文档来描述图形，开发人员通常通过修改其中的 XML 标记来完成对图像的修改。

我们先简单的看下两个简单的demo:

第一个是Canvas的

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

</body>
</html>

ECharts的简单入门_开发问题

第二个是SVG的

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
   <polygon points="100,10 40,180 190,60 10,60 160,180"
   style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
 
</body>
</html>

ECharts的简单入门_开发问题_02

所以我看可以看出，canvas是通过js来绘制图形，而SVG是在已有的图像模型，对标签的属性修改来控制图形。而ECharts是基于canvas来实现画图的。

二、什么是ECharts

ECharts就是一个纯JavaScript的图标库,给我们提供直观，交互丰富，可高度个性化定制的数据可视化图表，让数据展示变得更加友好灵动。

三、ECharts支持的图表类型很多，我们可以在ECharts的官网https://www.echartsjs.com/zh/index.html看到ECharts支持的类型，可以说能满足我们的各种各样的需求

ECharts的简单入门_开发问题_03

四、ECharts如何使用

1.我们先看个demo,然后根据这个demo，看看怎么具体学习echarts的使用，可以直接把这段代码粘贴到你的开发软件里，但是要记得去官网先下载 echarts.js。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script> //想使用ECharts必须要引入echarts.js
<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: 'ECharts 入门示例'
            },
            tooltip: {},//---------------------------------------------提示框
            legend: { //-----------------------------------------------图例
                data:['销量']
            },
            xAxis: { //------------------------------------------------x轴
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {}//------------------------------------------------y轴
            series: [{//-----------------------------------------------系列列表。每个系列通过 type决定自己的图表类型
                name: '销量',
                type: 'bar',//-----------------------------------------柱状图
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

展示的效果：

ECharts的简单入门_开发问题_04