ECharts是一个基于JS的可视化图表
-
特点：
-
性能好，流畅运行于 PC 和 移动端
-
兼容主流浏览器
-
提供非常多的常用图表，且支持定
-
数据可视化概念
1.借助图形手段, 清晰传达信息的表现方式
2.把枯燥的数字数据, 转换成图形, 数据特点更突出
数据不需要我们要一笔一划的自己画出来，有人已经封装好了一些可以复用的图表供我们使用，也就是ECharts
https://echarts.apache.org/zh/index.html基本改样式的命令
如果想知道echarts的属性，可以从这里查看
如何使用echarts图表呢？
1.打开官网
2.点击快速入门
3. 在项目中引入echarts
4.使用如下命令通过 npm 安装 ECharts（后边步骤可以查看官网）
npm install echarts --save5.引入 ECharts
（1）准备一个具备宽高的DOM容器
<div id="main" style="width: 600px; height: 400px"></div>
（2）初始化Echarts实例
let myEchart = echarts.init(document.querySelector('#main'))
（3）准备配置项
let option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
基础使用echarts的代码示例：（以下内容可直接粘贴到HTML中查看）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-02.ECharts_基础学习</title>
</head>
<body>
<div id="main" style="width: 600px; height: 400px"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script>
// 1. 引入ECharts.js (全局有个echarts对象)
// 2. 准备具备"宽高"的容器
// 3. 初始化一个Echarts实例
let myEchart = echarts.init(document.querySelector('#main'))
// 4. 准备配置项option
// 指定图表的配置项和数据
let option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
// 5. 基于配置项显示图表
myEchart.setOption(option)
</script>
</body>
</html>
打开这里就可以查看全部示例
如果需要使用别的图表，可以直接从这里点开图例
然后根据属性介绍，按需修改代码，再把修改完成的代码，粘贴在HTML内的option={}里边
1814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
