开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):统计分析图表显示(其他样式)】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/667/detail/11513
统计分析图表显示(其他样式)
目录:
一、样式调整
二、ECharts
一、样式调整
参考配置手册: htps://echars.baidu.com/option.htm#litle
1、显示标题
title: {
text: this . title
},
//指定图表的配置项和数据
var option = {
title:
text:
数据统计
},
tooltip: {
trigger:'axis'
},
// x 轴是类目轴(离散数据),必须通过 data 设置类目数据
2、x 坐标轴触发提示
tooltip: {
trigger: 'axis'
},
3、区域缩放
dataZoom: [{
show: true.
height:30,
XAxisIndex:{
0
],
bottom: 30,
start:10,
end:88,
handleIcon:"path:///306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4v413z”,
handleSize:"110%”,
handleStyle:{
color:'#d3dee5'
},
textStyle:{
color:"#fff*}
borderColor:"#98979c*
},
{
type: 'insilde',
shaw: true,
height: 15,
start: 1,
end: 35
}]
二、ECharts
1、简介
ECharts 是百度的一个项目,后来百度把 Echar 捐给 apache,用于图表展示,提供了常规的折线图、柱状图、散点图、饼图、K 线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap 旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
官方网站: https://echarts.baidu.com/
2、基本使用
入门参考:官网->文档>教程-> 5分钟上手 ECharts
( 1)创建 htm 页面:柱图.html
( 2)引入 ECharts
代码如下:
<!-- 引入ECharts文件-- >
<script src=" echarts .min.js"></script>
(3)定义图表区域