当前位置:首页 > 技术文章 > 正文内容

介绍一款数据可视化编程工具-ECharts

zonemu2周前 (07-21)技术文章6

ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。


从官网下载echarts库,其中一个是echarts.js。下面实例就是用了这个js。


试了一下官网提供的入门示例:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>echarts实例1</title>

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

</head>

<!--为echart准备一个定义了宽高的DOM!-->

<body>

<div id="main" style="width:650px;height:500px;"></div>

<script type="text/javascript">

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

var myChart=echarts.init(document.getElementById('main'));

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

var option ={

title:{

text:'echart入门实例'

},

tooltip:{},

legend:{

data:['销量']

},

xAxis:{

data:['电冰箱','洗衣机','空调','电饭锅','空气炸锅','高压锅']},

yAxis:{},

series:[

{

name:'销量',

type:'bar',

data:[500,200,300,1000,1000,300]

}

]

};

//使用上述自定的配置项和数据显示图表

myChart.setOption(option);

</script>

</body>

</html>



官网网址:

https://echarts.apache.org/zh/index.html

相关文章

java调用API操作GitLab(java调用zabbix api)

最近需要在一个WEB项目中集成GitLab,用到了GitLab的API操作,在网上找了很久都是说直接调用GitLab的Http接口,而且API官方只有javadoc没有其它说明文档,特别记录下,以备查...

使用GitLab实现CICD(gitlab配置cicd)

GitLab CI/CD 是一个内置在GitLab中的工具,用于通过持续方法进行软件开发:Continuous Integration (CI) 持续集成Continuous Delivery (C...

配置GitLab流水线和门禁系统(gitlab工作流)

在项目开发的过程中,为了保证代码质量,我们会使用诸多代码质量检测工具,这些工具或是在本地,或是在云端,虽然工具可以检测出异常问题,但是这些问题还是需要我们程序员来修复,如果我们不强制所有人必须修复异常...

K8s 的 Namespace 到底解决了什么问题?

在 Kubernetes 的世界里,资源调度、服务编排以及自动化运维构成了它强大的基础架构能力。但随着集群规模的扩大和团队协作复杂度的提升,仅靠原始的资源管理手段已经难以支撑多租户或大型项目的管理需求...

2个将HTML5打包成app的方法(h5打包成android)

越来越多的开发者热衷于使用html5+JavaScript开发移动Web App。不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数。那么,有什么办法,既可以使用H...

html5你能把太阳系动态做出来,但是你能把月亮也做出来吗?

需要源码请评论后加前端学习群470593776课题:HTML5加原生js打造一个炫酷动态的太阳系简介:首先对于太阳系各大星球的运转关系,速度等资料,不然弄出来也是被喷的下场, 还有对于逻辑思维,算法的...