前言
-
ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。 ECharts
-
兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种设备,可随时随地任性展示。
-
底层依赖于轻量级的Canvas类库ZRender,基于BSD开原协议,是一款非常优秀的可视化前端框架。
一、ECharts下载
1.首先在官网 选择合适的下载版本
官网链接:Apache ECharts
二、使用步骤
1.引入Echarts.js类库
<script src='echarts.min.js'></script>
2.绘制一个简单的柱状图
1.准备一个DOM容器
<style>
div {
width: 600px;
height: 400px;
margin: 0 auto;
}
</style>
<div></div>
2.制作简单的柱形图
<script>
//获取div容器
var div = document.querySelector('div');
//初始化echarts的实例对象
var myCharts = echarts.init(div);
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台'];
var yDataArr = [88, 72, 32, 58, 94, 53];
//准备配置项
var option = {
title: {
text: '语文成绩',
textStyle: {
color: 'green'
},
borderWidth: 5,
borderColor: 'blue',
borderRadius: 5
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [{
name: '语文',
type: 'bar',
color: 'pink',
data: yDataArr
}]
}
// 将配置项设置给echars实例
myCharts.setOption(option);
</script>
3.运行结果
总结
以上就是关于制作一个简单的数据可视化项目柱状图的全部内容,希望对大家的学习有所帮助,欢迎评论交流。能get到知识点不要忘了关注点个赞~ 拒绝白嫖从我们做起hh~