1数据可视化相关的库
- D3 是一个JavaScript数据可视化库用于HTML和SVG。它旨在将数据带入生活，强调Web标准，将强大的可视化技术与数据驱动的文档对象模型(DOM)操作方法相结合。D3是Github上最流行的数据可视化项目，在数据科学界有很好的表现。官方网址：https://d3js.org/。
- ECharts提供了常规的折线图、柱状图等；用于地理数据可视化的图；用于关系数据可视化的图表；还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形。官方网址：https://echarts.apache.org/zh/index.html。
- chartjs是一个图表控件集合，使用html5的canvas进行绘制。官方网址:http://chartjs.cn/。
- Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库，全部源码开放，个人及非商业用途可以任意使用及源代码编辑。官方网址:https://www.highcharts.com.cn/。
- AntV 3.0 已全新升级，主要包含 G2、G6、F2、L7 以及一套完整的图表使用和设计规范。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验后方敢与君见。官方网址:https://antv.vision/zh。
2使用ECharts实现可视化图表
一、在Web端实现ECharts
- 下载ECharts相关的资源文件，官方为我们提供了多种下载方式，选择自己可以操作的下载方式即可，本文主要使用dist文件夹下的echarts.min.js；
- 在Visual Studio Code中新建一个echarts01.html，用来展示可视化图表,并在文中实现如下代码
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./dist/echarts.min.js">script>
<style>h1 {text-align: center;
}style>
head>
<body>
<h1>Week's Gain And Lossh4>
<div id="main" style="width: 100%;height:800px;">div>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据
option = {tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},legend: {data: ['利润', '支出', '收入']
},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true
},xAxis: [
{type: 'value'
}
],yAxis: [
{type: 'category',axisTick: {show: false
},data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],series: [
{name: '利润',type: 'bar',label: {show: true,position: 'inside'
},data: [200, 170, 240, 244, 200, 220, 210]
},
{name: '收入',type: 'bar',stack: '总量',label: {show: true
},data: [320, 302, 341, 374, 390, 450, 420]
},
{name: '支出',type: 'bar',stack: '总量',label: {show: true,position: 'left'
},data: [-120, -132, -101, -134, -190, -230, -210]
}
]
};// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);script>
body>
html>- 在代码中的option是数据可视化的关键数据，在使用过程中可根据具体需求更换option来展示其它饼状图、雷达图、柱状图等。
二、结合腾讯云实现以上案例
- 登录腾讯云官方注册账号，登录成功之后，在左上角找到云产品>云开发>云开发CloudBase>新建环境即可使用；
- 如图所示，在左侧找到数据库>添加集合Echarts>在桌面新建txt文件，并把option数据放入文件中，保存为json文件>导入json文件到Echarts集合中
说明：其中点击红色箭头导入json文件，蓝色箭头部分为导入成功的一条数据。
- 在代码中使用云开发来实现ECharts，代码如下所示；
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://imgcache.qq.com/qcloud/tcbjs/1.5.1/tcb.js">script>
<script src="./dist/echarts.min.js">script>
<style>h1 {text-align: center;
}style>
head>
<body>
<h1>Week's Gain And Lossh4>
<div id="main" style="width: 100%;height:800px;">div>
<script type="text/javascript">const app = tcb.init({env: '你的环境ID' // 此处填入你的环境ID
});
app.auth({persistence: 'session' //在窗口关闭时清除身份验证状态
})
.anonymousAuthProvider()
.signIn() //AnonymousAuthProvider.signIn() 匿名登录云开发
.then(() => { //登录成功const db = app.database()
db.collection("Echarts").where({_id: "ofPyPg1pMtWhlbVdheFDRrp5b8o1YSzPZeg5znMXFCg2GsxL",
}).get().then(res => {const option = res.data[0]// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
}).catch(err => {console.log("登录失败", err) //登录失败
})script>
body>
html>4.在腾讯云开发左侧找到静态网站托管，这里是把自己的HTML文件和ECharts文件上传到文件管理中，以便我们在浏览器访问
- 打开静态网站托管>文件管理>上传文件(找到自己HTML文件的存放位置上传即可)
- 打开静态网站托管>基础配置(找到自己的默认域名)>在浏览器中通过“域名/文件路径”即可访问
三、在微信小程序中使用ECharts
- 下载微信开发者工具，申请小程序appid
- 下载githup上的开源echarts小程序
- 在微信开发者创建一个新项目，创建成功之后把其它不需要的文件删除干净
- 把githup上下载的小程序中的ec-canvas、img文件复制到自己创建的项目中
- 把app.wxss中的代码复制到自己项目中的app.wxss
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}- 把其中一个page页面复制到自己项目中，其中wxml、wxss、json文件都是通用的，使用时把js文件中的option替换掉就可以使用其它页面
四、小程序云开发实现ECharts
- 下载微信开发者工具，申请小程序appid
- 下载githup上的开源echarts小程序
- 在微信开发者创建一个新项目，并点击云开发，创建成功之后把其它不需要的文件删除干净，并在app.js中初始化云开发，云开发环境id在小程序云开发控制台中设置找到
onLaunch: function () {
wx.cloud.init({
env:"云开发环境id",
})
}- 在云开发控制台>数据库>新建集合Echarts>高级操作>add模板，其中data为option的数据，点击执行即可
- 把githup上下载的小程序中的ec-canvas、img文件复制到自己创建的项目中
- 把app.wxss中的代码复制到自己项目中的app.wxss，代码同上
- 把其中一个page页面复制到自己项目中，其中wxml、wxss、json文件都是通用的，使用时把js文件中的option替换掉就可以使用其它页面，这里的option通过云开发获得
import * as echarts from '../../ec-canvas/echarts';
const app = getApp()
const db = wx.cloud.database()
async function initChart(canvas, width, height, dpr) {
const option = (await db.collection("Echarts").where({
_id:"baada3ac5ed4ab250022ec955b2a7fec",
}).get()).data[0]
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
})
canvas.setChart(chart);
chart.setOption(option, true);
return chart;
}
Page({
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦！',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
data: {
ec: {
onInit: initChart
}
},
})3使用AntV实现数据可视化
1.AntV的特性
- ? 完善的图形语法：数据到图形的映射，能够绘制出所有的图表。
- ? 全新的交互语法：通过触发和反馈机制可以组合出各种交互行为，对数据进行探索。
- ? 强大的 View 模块：可支持开发个性化的数据多维分析图形。
- ? 双引擎渲染：Canvas 或 SVG 任意切换。
- ? 可视化组件体系：面向交互、体验优雅。
- ? 全面拥抱 TypeScript：提供完整的类型定义文件。
2.Antv的安装方法
- 通过 npm 安装
npm install @antv/g2 --save安装完成之后，可使用 import 或 require 进行引用。
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'c1',
width: 600,
height: 300,
})- 浏览器引入，既可以通过将脚本下载到本地也可以直接引入在线资源：
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/{{version}}/dist/g2.min.js">script>
<script src="./g2.js">script>- 你也可以直接通过 unpkg 下载
3.AntV的使用
可以在官网上找到需要自己使用的Demo,把对应的代码替换掉即可使用，以下为各国人口分布图的代码：
html>
<html>
<head>
<meta charset="utf-8" />
<title>柱状图title>
<script src="./node_modules/@antv/g2/dist/g2.min.js">script>
<style>h1 {text-align: center;
}style>
head>
<body>
<h1>各国人口分布图h1>
<div id="container">div>
<script>const data = [
{ city: '中国(北京)', type: '首都人口', value: 0.01 },
{ city: '中国(北京)', type: '城市人口', value: 0.53 },
{ city: '中国(北京)', type: '农村人口', value: 0.46 },
{ city: '美国(华盛顿)', type: '首都人口', value: 0.01 },
{ city: '美国(华盛顿)', type: '城市人口', value: 0.8 },
{ city: '美国(华盛顿)', type: '农村人口', value: 0.19 },
{ city: '印度(德里)', type: '首都人口', value: 0.02 },
{ city: '印度(德里)', type: '城市人口', value: 0.3 },
{ city: '印度(德里)', type: '农村人口', value: 0.68 },
{ city: '俄罗斯(莫斯科)', type: '首都人口', value: 0.08 },
{ city: '俄罗斯(莫斯科)', type: '城市人口', value: 0.66 },
{ city: '俄罗斯(莫斯科)', type: '农村人口', value: 0.26 },
{ city: '法国(巴黎)', type: '首都人口', value: 0.16 },
{ city: '法国(巴黎)', type: '城市人口', value: 0.63 },
{ city: '法国(巴黎)', type: '农村人口', value: 0.21 },
{ city: '韩国(首尔)', type: '首都人口', value: 0.19 },
{ city: '韩国(首尔)', type: '城市人口', value: 0.63 },
{ city: '韩国(首尔)', type: '农村人口', value: 0.18 },
{ city: '丹麦(哥本哈根)', type: '首都人口', value: 0.22 },
{ city: '丹麦(哥本哈根)', type: '城市人口', value: 0.65 },
{ city: '丹麦(哥本哈根)', type: '农村人口', value: 0.13 },
{ city: '冰岛(雷克雅未克)', type: '首都人口', value: 0.56 },
{ city: '冰岛(雷克雅未克)', type: '城市人口', value: 0.38 },
{ city: '冰岛(雷克雅未克)', type: '农村人口', value: 0.06 },
];const chart = new G2.Chart({container: 'container',autoFit: true,height: 700,
});
chart.data(data);
chart.scale('value', {alias: '占比(%)',
});
chart.axis('city', {tickLine: null,line: null,
});
chart.axis('value', {label: null,title: {style: {fontSize: 14,fontWeight: 300,
},
},grid: null,
});
chart.legend({position: 'top',
});
chart.coordinate('rect').transpose();
chart.tooltip({shared: true,showMarkers: false,
});
chart.interaction('active-region');
chart
.interval()
.adjust('stack')
.position('city*value')
.color('type*city', (type, city) => {if (type === '首都人口') {return '#1890ff';
}if (type === '城市人口') {return '#ced4d9';
}if (type === '农村人口') {return '#f0f2f3';
}if (type === '首都人口' && city === '中国(北京)') {return '#f5222d';
}
})
.size(26)
.label('value*type', (val, t) => {const color = t === '首都人口' ? 'white' : '#47494b';if (val 0.05) {
return null;
}
return {
position: 'middle',
offset: 0,
style: {
fontSize: 12,
fill: color,
lineWidth: 0,
stroke: null,
shadowBlur: 2,
shadowColor: 'rgba(0, 0, 0, .45)',
},
};
});
chart.render();
script>
body>
html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
