java图书分析echarts_JavaWeb之Echarts数据统计图表详细教程

一、什么是Echarts？ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库，提供直 观，生动，可交互，可个性化定制的数据可视化图表。

二、Echarts的下载

三、Echarts的开发步骤

3.1 Echarts的引入将Echarts引入到项目中，其实官方就给了解释。可以点击5分钟上手Echarts进入。这里通过标签引入打包下载好的Echarts。

3.2 Echarts入门案例步骤引入Echarts文件

为 ECharts 准备一个具备高宽的DOM容器

初始化一个echarts实例

指定你所需要图的配置项和数据

通过 setOption 方法生成一个简单的柱状图

Created by IntelliJ IDEA.

User: Ziph

Date: 2020/5/19

Time: 13:22

To change this template use File | Settings | File Templates.

--%>

echarts入门

​

$(function () {

/*3.初始化echarts容器*/

var eCharts = echarts.init(document.getElementById("main"));

/*4.设定echarts属性*/

eCharts.setOption({

title: {

text: 'ECharts 入门示例'

},

tooltip: {},

legend: {

data: ['销量']

},

xAxis: {

data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

});

});

​

四、Echarts官方文档的使用关于Echarts的使用，我们必须学会查看Echarts的官方文档，这里我给大家介绍一下官方文档的常用操作。

4.1 5分钟上手教程5分钟上手教程就是新手教程了！

4.2 API可以根据API查询在使用Echarts时的语法！可以根据语法来操作Echarts图表！

4.3 官方实例可以根据官方实例，找到并修改自己想要的图表，最后粘贴复制到自己的项目中使用即可！