ECharts初步认识和简单介绍

最近在工作中搬砖领导一个需求抛来要在前端项目中画图，二维的和三维的，然后查找资料发现一个echarts的JavaScript开源可视化图表库，结合官方文档和视频教程慢慢摸索着使用。

ECharts简介

ECharts 是一个强大的开源 JavaScript 数据可视化库，由百度开发和维护。它提供了丰富的图表类型和高度的定制能力，使得开发者能够轻松地在网页上创建出各种美观、交互性强的数据可视化效果。ECharts 支持的图表类型包括但不限于：

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

ECharts简单使用

ECharts 的简单用法可以分为以下几个步骤：

引入 ECharts 库： 在你的 HTML 文件中，通过

<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>

准备 DOM 容器： 在你的 HTML 中创建一个具有特定大小的 DOM 元素，ECharts 图表将在这个元素中渲染。

<div id="main" style="width: 600px;height: 400px;"></div>

初始化 ECharts 实例： 使用 echarts.init 方法初始化一个 ECharts 实例，传入你想要渲染图表的 DOM 容器。

var myChart = echarts.init(document.getElementById('main'));

配置图表选项： 创建一个包含图表类型、数据、样式等各种配置的 JSON 对象。

var option = {
    title: {
        text: '示例图表'
    },
    xAxis: {
        data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    },
    yAxis: {},
    series: [{
        name: '值',
        type: 'line',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
    }]
};

渲染图表： 使用 setOption 方法将配置选项应用到 ECharts 实例中，从而渲染图表。

myChart.setOption(option);