简单实现一个echarts图表
首先下载echarts.js
在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。
接下来通过五步来实现一个基础的柱状图表。
步骤1：引入echarts.js文件
步骤2：准备一个呈现图标的盒子
步骤3：初始化echarts实例对象
步骤四：准备配置项
步骤5：将配置项设置给echarts实例对象
示例图片：
示例代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echarts的快速上手</title>
<!-- 步骤1：引入echarts.js文件 -->
<script src="lib/echarts.js"></script>
</head>
<body>
<!-- 步骤2：准备一个呈现图标的盒子 -->
<div></div>
<script>
// 步骤3：初始化echarts实例对象
// 参数，dom，决定图标最终呈现的位置
let mCharts = echarts.init(document.querySelector('div'));
// 步骤四：准备配置项
let option = {
title: {
text: '成绩', //主标题文本
link: 'http://www.baidu.com', //主标题文本超链接。
textStyle: { //主标题文本的样式
color: 'red'
}
},
xAxis: {
type: 'category', //类目轴
data: [ '小明', '小红', '小王' ]
},
yAxis: {
type: 'value' //数值轴
},
series: [
{
name: '语文',
type: 'bar', //柱状
data: [70, 92, 87]
}
]
}
// 步骤5：将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
</html>