Echarts助力大数据绘制可视化图表零基础入门-针对运维
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Echarts助力大数据绘制可视化图表零基础入门-针对运维，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1461字，纯文字阅读大概需要3分钟。
内容图文
前言
因为语言能力比较差,个人只稍接触过python,php,shell(也算语言吧^^),突然遇到echarts javascripts语言类型,看了多遍官网也一直没有什么思路,网上找到的部分文章表示云里雾里,索引耐着性子钻研了会javascripts 和 echarts 感觉还是非常简单的。
-
Echarts简介
-
Echarts简介
-
百度开源产品
-
Echarts主要用于数据汇总后的图表展示,基于zreader底层类库,通过创建坐标,图例,提示等组件,通过柱状图,散点图,拆线图,仪表图,地图等方式静态或动态展示。
-
-
地址
|
http://echarts.baidu.com/index.html |
|
https://github.com/ecomfe/echarts |
-
使用能力需求:
-
懂html <head><body><scripts>等层级架构
-
懂web服务
-
Echarts使用场景:
-
先介绍下个人的需求场景, zabbix首页展示可读性太差. 除专业人士外,普通产品,开发,BOSS想了解业务信息,难度不小.
-
数据汇总友好展示
-
Echarts使用
2.1 环境介绍
|
系统 |
CentOS release 6.5 (Final) |
|
Nginx版本 |
nginx/1.4.7 |
|
echarts版本 |
2.1.8 |
|
Echarts nginx 配置目录 |
/usr/share/echarts-2.1.8 |
|
Zrendernginx 配置目录 |
/usr/share/zrender-2.0.5 |
2.2 理解echarts目录摆放
注: 如下脚本从官网下载的脚本,可直接copy
|
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:400px"> |
<!-- ECharts单文件引入 我们这里只介绍单文件引入方式-->
<script src="./build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: ‘./build/dist‘
}
});
// 使用
require(
[
‘echarts‘,
‘echarts/chart/bar‘ // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById(‘main‘));
var option = {
tooltip: {
show: true
},
legend: {
data:[‘销量‘]
},
xAxis : [
<span style="font
原文：http://fengzhilinux.blog.51cto.com/1343279/1577684
内容总结
以上是互联网集市为您收集整理的Echarts助力大数据绘制可视化图表零基础入门-针对运维全部内容，希望文章能够帮你解决Echarts助力大数据绘制可视化图表零基础入门-针对运维所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。