数据可视化
数据可视化数据可视化
[*]数据可视化重要目的：借助于图形化本领，清晰有用地转达与沟通信息。
[*]数据可视化可以把酷寒的数字转换成图形，展现蕴含在数据中的规律和原理。
常用的数据可视化库：
[*]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:
}]
}
[*]把配置项给实例对象
// 把配置项给实例对象；
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: }] } // 把配置项给实例对象； myChart.setOption(option); </script></body></html> ECharts 官网
ECharts 官网：https://blog.csdn.net/images/echarts_logo.pnghttp://echarts.apache.org/ECharts 社区
ECharts 社区：https://blog.csdn.net/images/logo.pnghttps://gallery.echartsjs.com/explore.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]