我们使用 echarts，和使用其它 js 库，一般都是这 3 个步骤：
- 引入 cdn
- 放置 html 元素
- JavaScript 代码绑定 html 元素并执行
<!-- 引入 ECharts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 创建一个用于显示折线图的 div 容器，设置宽度为 600 像素，高度为 400 像素 -->
<div id="lineChart" style="width: 600px;height:400px;"></div>
<script>
// 初始化 ECharts 实例，并将其绑定到上述 div 容器
var lineChart = echarts.init(document.getElementById('lineChart'));
// 定义折线图的配置选项
var lineOption = {
// 配置图表的标题
title: {
text: '折线图示例' // 设置标题文本为“折线图示例”
},
// 配置提示框组件，默认配置即可显示数据详细信息
tooltip: {},
// 配置图例
legend: {
data: ['温度'] // 图例数据，显示为“温度”
},
// 配置 X 轴
xAxis: {
type: 'category', // X 轴类型：类目轴
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] // X 轴数据，表示一周中的七天
},
// 配置 Y 轴
yAxis: {
type: 'value' // Y 轴类型：数值轴
},
// 配置数据系列
series: [{
name: '温度', // 系列名称为“温度”
type: 'line', // 图表类型为折线图
data: [11, 11, 15, 13, 12, 13, 10] // 数据项，表示一周中每天的温度
}]
};
// 使用 setOption 方法将配置项设置给 ECharts 实例，生成图表
lineChart.setOption(lineOption);
</script>
去创作