web前端-Echarts-5.3安装配置和案例

简介: web前端-Echarts-5.3安装配置和案例

N.1 安装配置

1)安装版本介绍

(1)完全版:echarts/dist/echarts.js,体积最大,包含所有的图表和组件,所包含内容参见:echarts/echarts.all.js。(里面包括很多图形,建议使用该类库)

(2)常用版:echarts/dist/echarts.common.js,体积适中,包含常见的图表和组件,所包含内容参见:echarts/echarts.common.js。(里面包括常见图形,但有的没有,)

(3)精简版:echarts/dist/echarts.simple.js,体积较小,仅包含最常用的图表和组件,所包含内容参见:echarts/echarts.simple.js。

2)独立版本安装

(1)下载地址 Tags · apache/echarts · GitHub

(2)文件解压后的结构

其中theme是主题 是可选的

3)非独立版安装

其实就是独立版本的 echarts.xxx.js 文件拷贝出来

N.2 案例演示

<script> </script>标签可以放在<html> </html>表情外面

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>第一个 ECharts 实例</title>

<!-- 引入 echarts.js -->

<script src="D:\software\echarts-5.3.3\dist\echarts.common.js"></script>

<script src="D:\software\echarts-5.3.3\theme\vintage.js"></script>

</head>

<body>

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->

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

</body>

</html>

<script type="text/javascript">

// 基于准备好的dom,初始化echarts实例,vintage背景参数是可选的

var myChart = echarts.init(document.getElementById('id1'),'vintage');

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

var option = {

title: {

text: '第一个 ECharts 实例'

},

tooltip: {},

legend: {

data:['销量']

},

xAxis: {

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

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

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

}]

};

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

myChart.setOption(option);

</script>

创建一个test.html的文件夹

可以使用功能DW工具开发

N.3 官方模板

面板案例下载 Examples - Apache ECharts

相关文章
|
1天前
|
前端开发
web前端作业3
web前端作业3
9 1
|
1天前
|
前端开发 安全 数据安全/隐私保护
web前端第二天
web前端第二天
7 1
|
1天前
|
前端开发
web前端的作业1
web前端的作业1
6 1
|
1天前
|
前端开发 JavaScript 搜索推荐
WEB前端第一天
WEB前端第一天
10 1
|
1天前
|
存储 人工智能 前端开发
从前端到后端,探索Web开发的奥秘
Web开发是当今最热门的技术领域之一,涉及前端、后端、数据库等多个方面。本文将介绍Web开发的基本架构和技术要点,并深入探讨前后端交互、安全性等问题,帮助读者更好地理解Web开发的奥秘。
|
1天前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术演进
本文探讨了从前端到后端的技术演进,介绍了前端、后端以及多种编程语言,如Java、Python、C、PHP和Go,以及数据库在构建现代化Web应用中的应用。通过深入剖析各个技术领域的发展和应用,读者将对构建高效、可扩展、安全的Web应用有更深入的理解。
|
2天前
|
编解码 前端开发 UED
探索Web前端开发中的响应式设计原则
本文将介绍Web前端开发中的响应式设计原则,探讨如何通过优化网页布局、使用媒体查询和灵活的CSS技术,实现在不同设备上的良好用户体验。我们将讨论适应性布局、流式布局和弹性布局等关键概念,并提供实际示例帮助读者更好地理解和应用这些原则。
|
6天前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
70 0
|
6天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
33 0
|
6天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
29 0