数据可视化

数据可视化

数据可视化
  • 数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。
  • 数据可视化可以把冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。
常用的数据可视化库:
  • D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
  • ECharts.js 百度出品的一个开源 Javascript 数据可视话库
  • Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
  • AntV 蚂蚁金服全新一代数据可视化解决方案
  • Highcharts 和 ECharts 就像是 Office 和 WPS 的关系
选择 ECharts 的原因
  • ECharts 遵循 Apache-2.0 开源协议,免费商用。
  • 全新4.0 SVG + Canvas 双引擎动力更佳。
  • 中文文档,阅读使用友好。
  • 上手简单。
  • 兼容性好:兼容当前绝大部分浏览器(IE8/9/10/11, Chrome, Firefox, Safari 等)

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

ECharts 使用五部曲

步骤一:下载并引入 echarts.js 文件

步骤二:准备一个具备大小(宽高)的 DOM 容器

步骤三:初始化 echarts 实例对象

步骤四:指定配置项和数据(option)

步骤五:将配置项设置给 echarts 实例

  • 下载引入 (...)

html 引入

复制代码
<script src="/js/echarts.min.js"></script>

vue 引入

复制代码
import echarts from 'echarts'
  • 容器准备

dom 元素

复制代码
<div class="chartBox" id="chartBox"></div>

...
...

.chartBox {
    width: 800px;
    height: 600px;
}
  • 初始化实例

    // 初始化实例对象 echarts.init(dom容器);
    var myChart = echarts.init(document.querySelector("#chartBox"));

  • 指定配置项和数据

    // 指定配置项和数据
    var option = {
    title: {
    text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
    data: ['销量'],
    },
    xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
    name: '销量',
    type: 'bar',
    data: [500, 2000, 360, 100, 158, 267]
    }]
    }

  • 把配置项给实例对象

    // 把配置项给实例对象;
    myChart.setOption(option);

完整代码:

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello ECharts!</title>
    <style>
        .chartBox {
            width: 800px;
            height: 600px;
            border: 1px darkblue dashed;
        }
    </style>
</head>

<body>
    <div class="chartBox" id="chartBox"></div>

    <script src="/js/echarts.min.js"></script>
    <script>
        // 初始化实例对象 echarts.init(dom容器);
        var myChart = echarts.init(document.querySelector("#chartBox"));

        // 指定配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量'],
            },
            xAxis: {
                label: {
                    show: false
                },
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [{
                name: '销量',
                // type: 'bar', // 柱状图
                // type: 'line', // 折线图
                type: 'pie', // 饼状图
                data: [500, 2000, 360, 100, 158, 267]
            }]
        }

        // 把配置项给实例对象;
        myChart.setOption(option);
    </script>
</body>

</html>
ECharts 官网

ECharts 官网: http://echarts.apache.org/

ECharts 社区

ECharts 社区: https://gallery.echartsjs.com/explore.html

相关推荐
镜舟科技14 小时前
StarRocks × Tableau 连接器完整使用指南 | 高效数据分析从连接开始
starrocks·数据分析·数据可视化·tableau·连接器·交互式分析·mpp 数据库
永洪科技1 天前
永洪科技荣获商业智能品牌影响力奖,全力打造”AI+决策”引擎
大数据·人工智能·科技·数据分析·数据可视化·bi
Codebee1 天前
OneCode图表配置速查手册
大数据·前端·数据可视化
DataGear2 天前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
程序员阿超的博客2 天前
Python 数据分析与机器学习入门 (五):Matplotlib 数据可视化基础
python·信息可视化·数据分析·matplotlib·数据可视化·python教程·pyplot
大数据CLUB3 天前
基于spark的航班价格分析预测及可视化
大数据·hadoop·分布式·数据分析·spark·数据可视化
镜舟科技3 天前
数据可视化:5 分钟读懂其核心价值与技术实践
starrocks·数据可视化·用户行为分析·商业智能·自然语言交互·商业价值·跨部门协作
云天徽上12 天前
【目标检测】图像处理基础:像素、分辨率与图像格式解析
图像处理·人工智能·目标检测·计算机视觉·数据可视化
@十八子德月生13 天前
第十章——8天Python从入门到精通【itheima】-102-Python基础综合案例-数据可视化(pyecharts的入门使用+数据处理)
大数据·开发语言·前端·后端·python·学习·数据可视化
anyup13 天前
AI 也救不了的前端坑,你遇到过吗?社区、AI、源码三重排查!
前端·数据可视化·cursor