优秀的编程知识分享平台

网站首页 > 技术文章 正文

ECharts 库的应用（echarts.apache.org）

nanyue 2024-10-12 05:48:47 技术文章 9 ℃

什么是 ECharts

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

ECharts 提供了丰富的图表类型和交互能力，使用户能够通过简单的配置生成各种各样的图表，包括但不限于折线图、柱状图、散点图、饼图、雷达图、地图等。

通过在页面中嵌入 ECharts 图表的方式，结合给定的数据， 可动态展示数据信息。


引用方式

ECharts 库的引入方式有三种， 一种是通过下载 src 源码的方式， 然后 build 生成 echarts.js , 然后在 <script>$local_url </script> 中进行引用； 第二种是直接引用互联网上提供的远程 echarts.js 的url ，然后通过 <script> $remote_url </script> 进行引用; 第三种就是直接从网上 download 可发行的版本到本地进行引用；第四种就是 echarts 作为node 模块被引用。 下面仅讨论在 html 文件中远程和本地引用echarts.js库。


  • 远程引用的方式
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

</head>

</html>


  • 本地引用方式
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<script type="text/javascript" src="/static/echarts.js"></script>

</head>

</html>

本地代码组织结构如下所示。

echarts.js 存放在 static 目录， index.html 中直接引用了该 echarts.js。


源码编译

在 windows 环境下， 编译 echarts， 需要先行安装 node。

从 https://echarts.apache.org/zh/download.html 下载， 查看历史版本， 并下载 4.5.0 具体如下所示。

进入到源码目录， 执行下列命令。

npm install， 截图如下

npm run build, 截图如下

执行完成后， 在 dist 目录能看到已经生成的 echarts.js 模块， 通过将其复制到需要引用 echarts 模块的地方，即可应用。以例子说明。


工程应用

index.html 的引用内容为:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<!--<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>-->

<script type="text/javascript" src="/static/echarts.js"></script>

</head>

</html>

<body>

<div id="main" style="width: 600px; height: 400px;"></div>

<script type="text/javascript">

function display(id, option)

{

var mychart = echarts.init(document.getElementById(id));

mychart.setOption(option)

}

</script>

<script type="text/javascript">

// 基于准备好的dom, 初始化 echarts 实例

// 制定图表的配置项和数据

var option = {

title:{

text:'ECharts 入门实例'

},

tooltip:{},

legend:{

data: ['销量']

},

xAxis: {

data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

},

yAxis: {},

series: [

{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}

]

};

// 使用刚制定的配置项和数据显示图表

display('main', option)

</script>

</body>

在浏览器显示的结果为：

技术资料

ECharts 教程 | 菜鸟教程 (runoob.com)

https://echarts.apache.org/handbook/en/get-started/

Tags：

猜你喜欢

最近发表
标签列表