简介
丰富的可视化类型
Charts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。
你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。
多种数据格式无需转换直接使用
ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。
为了配合大数据量的展现，ECharts 还支持输入 TypedArray 格式的数据，TypedArray 在大数据量的存储中可以占用更少的内存，对 GC 友好等特性也可以大幅度提升可视化应用的性能。
千万数据的前端展现
通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量，并且在这个数据量级依然能够进行流畅的缩放平移等交互。
几千万的地理坐标数据就算使用二进制存储也要占上百 MB 的空间。因此 ECharts 同时提供了对流加载（4.0+）的支持，你可以使用 WebSocket 或者对数据分块后加载，加载多少渲染多少！不需要漫长地等待所有数据加载完再进行绘制。
具体的特性可以在这里查看:https://echarts.apache.org/zh/feature.html
教程:https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
代码
js的提取文件
链接：https://pan.baidu.com/s/1JbmCR5KiU9PdOwJ6_E0bew
提取码：ubpi
前端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height: 400px;">
<script>
//创建实例对象
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
//标题
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
//横坐标
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
//纵坐标
yAxis: {},
//数据和数据表类型的一个集合
series: [{
name: '销量',
//line(折线型) bar(条状型) pie(饼图) scatter(散点图)
//effectScatter(涟漪特效散点图) radar(雷达图) tree(树状图)
//treemap sunburst(旭日图) boxplot(箱形图) candlestick(k线图)
//heatmap(热力图) map(地图) parallel(平行坐标系) lines(线路图)
//graph(关系图) sankey(有向无环图) funnel(漏斗图) gauge(仪表盘)
//pictorialbar(象柱状图) themeRiver(主题河流)
type: 'line',
//这里设置的值与上面的xAxis中的列相对应
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
</body>
</html>
运行出来的效果
这里我们将数据定死了,那么如果是连接数据库的又该如何呢
数据库
/*
Navicat Premium Data Transfer
Source Server : seckill
Source Server Type : MySQL
Source Server Version : 50528
Source Host : localhost:3306
Source Schema : seckill
Target Server Type : MySQL
Target Server Version : 50528
File Encoding : 65001
Date: 16/08/2020 15:56:58
*/
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for food
-- ----------------------------
DROP TABLE IF EXISTS `food`;
CREATE TABLE `food` (
`foodClass` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL,
`price` double NULL DEFAULT NULL
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
-- ----------------------------
-- Records of food
-- ----------------------------
INSERT INTO `food` VALUES ('自助餐', 252.125);
INSERT INTO `food` VALUES ('茶餐厅', 60.666666666666664);
INSERT INTO `food` VALUES ('西北菜', 36);
INSERT INTO `food` VALUES ('小龙虾', 151.66666666666666);
INSERT INTO `food` VALUES ('粤菜', 100.97619047619048);
INSERT INTO `food` VALUES ('其他美食', 94.66666666666667);
INSERT INTO `food` VALUES ('台湾菜', 30);
INSERT INTO `food` VALUES ('快餐简餐', 23);
INSERT INTO `food` VALUES ('西餐', 154.96);
INSERT INTO `food` VALUES ('创意菜', 97.57142857142857);
INSERT INTO `food` VALUES ('家常菜', 27);
INSERT INTO `food` VALUES ('韩式料理', 81.16666666666667);
INSERT INTO `food` VALUES ('火锅', 98.93333333333334);
INSERT INTO `food` VALUES ('素菜', 91.6);
INSERT INTO `food` VALUES ('日本料理', 154.9512195121951);
INSERT INTO `food` VALUES ('咖啡厅', 67.83333333333333);
INSERT INTO `food` VALUES ('韩国料理', 82.22222222222223);
INSERT INTO `food` VALUES ('烧烤', 74.42857142857143);
INSERT INTO `food` VALUES ('湘菜', 78.2);
INSERT INTO `food` VALUES ('新疆菜', 102);
INSERT INTO `food` VALUES ('川菜', 84.14285714285714);
INSERT INTO `food` VALUES ('茶餐馆', 39.333333333333336);
INSERT INTO `food` VALUES ('东南亚菜', 110.71428571428571);
INSERT INTO `food` VALUES ('江浙菜', 109.66666666666667);
INSERT INTO `food` VALUES ('粥粉面', 18);
INSERT INTO `food` VALUES ('海鲜', 129.5);
INSERT INTO `food` VALUES ('面包甜点', 113.66666666666667);
SET FOREIGN_KEY_CHECKS = 1;
再就是后端的一个SpringBoot加MyBatis项目,这里只贴出sql查询和controller层
sql
controller
package com.jbit.echarts.controller;
import com.jbit.echarts.entity.Food;
import com.jbit.echarts.service.FoodService;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import com.jbit.echarts.service.*;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* (Food)表控制层
*
* @author makejava
* @since 2020-08-16 14:48:03
*/
@RestController
@RequestMapping("food")
@CrossOrigin(value = "*")
public class FoodController {
/**
* 服务对象
*/
@Resource
private FoodService foodService;
@RequestMapping("selectAll")
public Map<String,Object> selectAll() {
//取出查询出来的数据
List<Food> list = foodService.selectAll();
List<String> x = new ArrayList<>();
List<Integer> v = new ArrayList<>();
//将我们所需要的数据存储到集合中
for(Food food : list){
x.add(food.getFoodclass());
v.add(food.getPrice());
}
//返回
Map<String,Object> map=new HashMap<>();
map.put("xAxis",x);
map.put("val",v);
return map;
}
}
再就是将刚刚前端的代码除myChart变量之外下面的全部注释,增加如下内容
$.get('http://localhost:8081/food/selectAll').done(function (data) {
myChart.setOption({
title: {
text: '广东省美食种类人均消费额'
},
tooltip: {},
legend: {
data:['消费额']
},
xAxis: {
data: data.xAxis
},
yAxis: {},
series: [{
name: '消费额',
type: 'bar',
data: data.val
}]
});
});
接口端口的信息根据自己的修改,结果可以看到
得出来的数据可视化大方又清晰
但是可以看到上面的列名在后端处理的时候得转换成map,而不是自己本身的,对于这种情况,又有下面的定义方式,新建一个index2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<body>
<div id="main" style="width: 800px;height: 400px;">
<script>
//创建实例对象
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
legend: {},
tooltip: {},
//第一种方式
dataset: {
// 提供一份数据。
source: [
//可以看作列名
['product', '2015', '2016', '2017'],
//数据(有多少份)
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {type: 'category'},
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [
//对应上面product中的2015 2016 2017
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
</body>
</html>
效果
然后还有第二种方式,将dataset修改
dataset: {
// 用 dimensions 指定了维度的顺序。直角坐标系中，
// 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
// 如果不指定 dimensions，也可以通过指定 series.encode
// 完成映射，参见后文。
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},
效果图
再就是与后端接口相结合
后端接口正常返回
前端修改为
//与后端接口相结合
$.get('http://localhost:8081/food/selectAll2').done(function (data) {
myChart.setOption({
title: {
text: '广东省美食种类人均消费额'
},
tooltip: {},
legend: {
data:['消费额']
},
dataset: {
// 用 dimensions 指定了维度的顺序。直角坐标系中，
// 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
// 如果不指定 dimensions，也可以通过指定 series.encode
// 完成映射，参见后文。
dimensions: ['foodclass', 'price'],
source: data
},
xAxis: {
type: "category"
},
yAxis: {},
series: [{
name: '消费额',
type: 'bar',
data: data.val
}]
});
});
效果
2534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
