我的学习笔记9.30

最新推荐文章于 2024-10-09 11:19:11 发布

FreezeYM

最新推荐文章于 2024-10-09 11:19:11 发布

阅读量107

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_55691400/article/details/120559846

版权

2021SC@SDUSC

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

源码安装

在github上下载源码。

源码分析

经过讨论，我们认为echarts源码的核心部分在dist文件夹的echarts.js文件中

测试

创建一个简单的图表

CTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script src="echarts.js"></script>
</head>
<body>

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts test'
},
tooltip: {},
legend: {
data: ['h']
},
xAxis: {
data: ['a', 'b', 'c', 'd', 'e', 'f']
},
yAxis: {},
series: [
{
name: 'h',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};