开源可视化库 —— ECharts
程序员文章站
2022-06-22 13:58:41
介绍 今天做项目时需要实现数据可视化功能，了解一番后选择使用ECharts，今天特此整理一下，作为笔记，同时希望帮助更多人。 首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开源协议，是一款非常优秀的可视化前端框架。官网地址：https://echarts.apache.org/zh/index.html官方文档：https://echarts.apache.org/zh/tutorial.html#5%20%E5%8...
介绍
今天做项目时需要实现数据可视化功能，了解一番后选择使用ECharts，今天特此整理一下，作为笔记，同时希望帮助更多人。
首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开源协议，是一款非常优秀的可视化前端框架。
官网地址：https://echarts.apache.org/zh/index.html
官方文档：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
注意： 官网在国内可能被q，如果不能正常访问，请*。
整合Vue.js使用
1.下载ECharts
2.复制dist目录下的echarts.min.js文件到工程目录下
3.引入到页面中
4. 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
5. 生成图表
可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div id="echarts" style="width: 600px; height: 400px;"></div>
</div>
<script src="../js/vue.js"></script>
<script src="../js/echarts.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
//绘制图表的method
drawChart(){
//基于准备好的dom，初始化echarts实例
let mychart = echarts.init(document.getElementById('echarts'));
// 指定图表的配置项和数据
let option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
mychart.setOption(option);
},
},
mounted(){
//在DOM节点全部渲染完毕后绘制图表
this.drawChart();
},
created(){
}
})
</script>
</body>
</html>
6.效果图
总结
更详细的用法请大家参照官方文档（非常友好）。如有不当之处，欢迎指正，感谢。欢迎一键三连，拒绝白嫖从我做起hhh。
本文地址：https://blog.csdn.net/qq_40269087/article/details/112764343
上一篇： 如何理解泛型的协变与逆变