数据可视化

数据可视化

2025/5/24 9:55:51 来源：https://blog.csdn.net/chenshanqiang/article/details/144589915 浏览: 次关键词：数据可视化

数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。
数据可视化可以把冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。

常用的数据可视化库：

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>