前端数据可视化—Echart——笔记整理(黑马课程)
目录
4.1 修改柱形为圆角以及柱子宽度(在series配置项里设置)
1.Echarts介绍
1.1 常见的数据可视化库:
-
D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
-
ECharts.js 百度出品的一个开源 Javascript 数据可视化库
-
Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
-
AntV 蚂蚁金服全新一代数据可视化解决方案 等等
-
Highcharts 和 Echarts 就像是 Office 和 WPS 的关系
1.2 什么是echarts
官网地址:Apache ECharts
1.3 使用步骤:
1.引入echarts 插件文件到html页面中
2.准备一个有宽、高的DOM容器
3.初始化echarts实例对象
4.指定配置项和数据(option)
5.将配置项设置给echarts实例对象
- 1.引入echarts.min.js 插件、flexible.js、jquery.js、文件到html页面中
下载: :下载 - Apache ECharts
<script src="js/echarts.min.js"></script>
- 2.准备一个有宽、高的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>
- 3.初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
- 4.指定配置项和数据(option)
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
- 5.将配置项设置给echarts实例对象
myChart.setOption(option);
整体的代码如下:
<title>Echarts使用</title>
<!-- 第一步:引入echarts.js文件 -->
<script src="js/echarts.min.js"></script>
<style>
/* 第二步:准备一个有宽、高的DOM容器 */
.box {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
//第三步:初始化实例对象 echarts.init(dom容器)
var Chart = echarts.init(document.querySelector(".box"));
// 第四步:指定配置项和数据
var option = {
xAxis: {