首页 > 代码库 > Echarts助力大数据绘制可视化图表零基础入门-针对运维

Echarts助力大数据绘制可视化图表零基础入门-针对运维

2024-08-02 20:46:38   220人阅读

前言

因为语言能力比较差,个人只稍接触过python,php,shell(也算语言吧^^),突然遇到echarts javascripts语言类型,看了多遍官网也一直没有什么思路,网上找到的部分文章表示云里雾里,索引耐着性子钻研了会javascripts 和 echarts 感觉还是非常简单的。

  1. Echarts简介

    1. Echarts简介

    2. 百度开源产品
    3. Echarts主要用于数据汇总后的图表展示,基于zreader底层类库,通过创建坐标,图例,提示等组件,通过柱状图,散点图,拆线图,仪表图,地图等方式静态或动态展示。

  1. 地址

http://echarts.baidu.com/index.html

https://github.com/ecomfe/echarts

  1. 使用能力需求:

  2. 懂html <head><body><scripts>等层级架构
  3. 懂web服务

  4. Echarts使用场景:

  5. 先介绍下个人的需求场景, zabbix首页展示可读性太差. 除专业人士外,普通产品,开发,BOSS想了解业务信息,难度不小.
  6. 数据汇总友好展示

  1. 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="http://www.mamicode.com/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 : [

justify python style 文章 能力


联系
我们