菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端基础-付盼盼-20230602 [打印本页]

作者: 下潜 时间: 2023-6-14 19:53
标题: 前端基础-付盼盼-20230602
一、学习内容

使用 ECharts 生成图表的一些配置
第一步：创建 HTML 页面
创建一个 HTML 页面，引入 echarts.min.js：
第二步: 为 ECharts 准备一个具备高宽的 DOM 容器
实例中 id 为 main 的 div 用于包含 ECharts 绘制的图表:
第三步: 设置配置信息
ECharts 库使用 json 格式来配置。
-echarts.init(document.getElementById('main')).setOption(option);
这里 option 表示使用 json 数据格式的配置来绘制图表。步骤如下：
标题
为图表配置标题：
title: {
text: '第一个 ECharts 实例'
}
提示信息
配置提示信息：
tooltip: {},
图例组件
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
X 轴
配置要在 X 轴显示的项:
Y 轴
配置要在 Y 轴显示的项。
系列列表
每个系列通过 type 决定自己的图表类型:

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)