百度图表(一)

标签: 百度图表  前端  Echarts

一、学习百度图表插件ECharts

百度图表官方域名为:http://echarts.baidu.com。可以从该网站上下载百度图表的js文件,该文件的文件名为:echarts.js
在使用百度图表的HTML文档中加载下载的echarts.js文件:

<script type="text/javascript" src="js/echarts.js"></script>

首先需要在HTML文档中创建一个容器,并利用CSS技术为该容器设置宽度和高度。

<div id="main"></div>
#main{
	width:600px; height:500px; //宽度和高度可以根据需要任意设置
	border:solid 1px #666666;
}

在HTML文档中家在一个自定义js文件,并放置在<script></acript>标记对的末尾:

<script type="text/javascript" src="js/index.js"></script>

在自定义js文件中,使用ECharts插件,需要采用下列步骤:

1、获取盛放图表的div容器:
var mainNode=document.getElementById("main");
2、初始化echarts实例:
var myChart=echarts.init(mainNode);
3、指定图标的配置项和数据:
var option={}; //指定的图表配置项和数据可以放在 JSON 文件中
4、使用配置项和数据显示图表:
myChart.setOption(option);

如果想制作出符合自身要求的图表,需要指定图表的配置项和数据。图标的配置项和数据是一个JSON数据,可以存储在一个独立的JSON文件中,并按照百度图表的规定书写这个JSON文件。

二、制作第一个简易柱状图

下面为大家展示一个制作好的柱状图的配置项和数据:

var option={
	"title":{	//标题组件
		"text":"ECharts 入门实例"
	},
	"tooltip":{},	//工具提示
	"legend":{	//图例
		"data":["销量"]
	},
	"xAxis":{	//水平轴
		"data":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	},
	"yAxis":{},	//垂直轴(必须要写)
	"series":[{	//数据系列(数组)
		"name":"销量",
		"type":"bar",
		"data":[10,20,30,100,30,15]
	}],
	"color":["#ff5857"]	//颜色(数组)
}

上述代码定义了一个 JSON 数据,该 JSON 数据的第一级键名被 ECharts 称为“组件”。
title 是图表的标题组件;t
ooltip 是图表的提示框组件,也叫作“气泡”组件;
legend 是图表的图例组件;
xAxis 是图表的平面直角坐标系的 x 轴组件;
yAxis 是图表的平面直角坐标系的 y 轴组件;
series 是图表的数据系列组件;
color 是图表的调色盘组件。

ECharts 的各个组件包含更多的键名选项,可以控制每一个组件的功能和样式,是 ECharts 图表插件的核心内容。

将上述代码书写在一个独立的 JSON 文件中,再配合上一节中创建的 index.js 文件、样式文件、HTML文件就可以制作出一个简单的柱状图。

在这里插入图片描述

版权声明:本文为web_only_原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/web_only_/article/details/105938830