博主简介
毕业于武汉工商,有着两年开发经验,从事全栈工作,从系统需求设计,开发,测试,部署一整套开发体系,熟悉常用的关系型数据库,MySQL、Oracle、SqlServer等 ,也了解部分NoSQL,包括Redis、MongoDB等。实习的时候从事Java开发,熟悉基本的前端框架。现在转型学python,力求做一些自己的小产品,目前把自己学的经验积累给大家。
如果愿意跟着我一起学习可以加入
QQ群 534893126
个人QQ 365926403
如遇个人技术问题可联系我哦
1.echarts简介
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
2.echarts下载
Echarts的下载,可以去官方下载哦,地址如下:https://echarts.baidu.com/download.html 或者单击下载
3.开始使用echarts
不说了上代码。但是需要注意js的引入。
<!DOCTYPE html>
<html>
<head>
<title>echarts</title>
<!--这里一定要注意哦,这个js的引入错误的话是无法正常显示的 -->
<script type="text/javascript" src="../echarts.js"></script>
</head>
<body>
这是echarts的一个测试
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
//这是横坐标
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
//这是纵坐标
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
4.联系我
各位不懂的小伙伴可以加入本人的技术交流群QQ:534893126哦。欢迎各位小伙伴来积极探讨技术问题哦。也可以访问本人邮箱: 365926403@qq.com
或者访问本人博客,还出了同步视频链接: 下载视频 提取码: 6f07。在线观看