ECharts实现数据可视化入门教程（超详细）

瓜皮小郑
1,605 阅读2分钟

前面做项 首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。

1.首先在官网 选择合适的下载版本 ECharts官方文档传送门：echarts.apache.org/zh/index.ht…

echarts的基本使用

1.导包

<!-- 1.引入 ECharts 文件 -->
<script src="./echarts/echarts.min.js"></script>

2.HTML结构：一行代码

!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

3.js初始化

所有的图表使用步骤都是固定的，不同的图表仅仅只是配置项和数据不同而已

// 3.1 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('main'));

// 3.2 指定图表的配置项和数据
let option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data: ['销量']
    },
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
}

// 3.3使用刚指定的配置项和数据显示图表。
myChart.setOption(option)

eCharts各种酷炫图表制作只需要两个步骤

对比法

 (1)通过删减代码观察图表变化 （得知某个选项的作用）
 (2)对比其他图表，将其他图表代码复制粘贴（某个功能其他图表有，自己的图表没有）
 (3)对比其他图表，其他图表没有的代码，我也删除（观察某个属性的意思）

1.点击首页顶部的案例页面，里面有各种酷炫的图表

image.png

2.修改配置项，根据需求定制你的图表

image.png

image.png

[补充说明]eCharts自定义配置项介绍

 1.刚开始接触eCharts的时候，很容易被各种复杂的配置项绕晕，增加学习成本
 a.利用上一小节通过删减配置项观察右边图表的变化。可以最快的掌握常用配置项的作用
 b.在官网中，虽然有超级多的配置项。但是eCharts的文档写的非常的好，学习起来不会觉得有太大困难

超酷的迁徙地图

image.png

avatar
文章
阅读
粉丝