day16項(xiàng)目【統(tǒng)計分析】

01-統(tǒng)計分析功能（生成統(tǒng)計數(shù)據(jù)）

一、數(shù)據(jù)庫設(shè)計

1、數(shù)據(jù)庫：statistics_daily

2、數(shù)據(jù)表

二、創(chuàng)建微服務(wù)

1、在service模塊下創(chuàng)建子模塊service_statistics

2、resources目錄下創(chuàng)建文件application.properties

# 服務(wù)端口

server.port=8008

# 服務(wù)名

spring.application.name=service-statistics


# mysql數(shù)據(jù)庫連接

spring.datasource.driver-class-name=com.mysql.jdbc.Driver

spring.datasource.url=jdbc:mysql://localhost:3306/guli?serverTimezone=GMT%2B8&characterEncoding=utf-8&useSSL=false

spring.datasource.username=root

spring.datasource.password=123456


#返回json的全局時間格式

spring.jackson.date-format=yyyy-MM-dd HH:mm:ss

spring.jackson.time-zone=GMT+8

#配置mapper xml文件的路徑

mybatis-plus.mapper-locations=classpath:com/atguigu/staservice/mapper/xml/*.xml

#mybatis日志

mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

# nacos服務(wù)地址

spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

3、MP代碼生成器生成代碼

4、創(chuàng)建SpringBoot啟動類

@SpringBootApplication

@MapperScan("com.atguigu.staservice.mapper")

@ComponentScan("com.atguigu")

@EnableDiscoveryClient //遠(yuǎn)程調(diào)用

@EnableFeignClients?

public class StaApplication {

? ? public static void main(String[] args) {

? ? ? ? SpringApplication.run(StaApplication.class,args);

? ? }

}

三、實(shí)現(xiàn)服務(wù)調(diào)用

1、在service_ucenter模塊創(chuàng)建接口，統(tǒng)計某一天的注冊人數(shù)

UcenterMemberController

????//統(tǒng)計某一天注冊人數(shù),生成統(tǒng)計數(shù)據(jù)

? ? @GetMapping(value = "countregister/{day}")

? ? public R countregister(@PathVariable String day){

? ? ? ? Integer count = memberService.registerCount(day);

? ? ? ? return R.ok().data("countRegister", count);

? ? }

UcenterMemberService

????//統(tǒng)計某一天注冊人數(shù),生成統(tǒng)計數(shù)據(jù)

? ? Integer registerCount(String day);

UcenterMemberServiceImpl

????//統(tǒng)計某一天注冊人數(shù),生成統(tǒng)計數(shù)據(jù)

? ? @Override

? ? public Integer registerCount(String day) {

? ? ? ? return baseMapper.selectRegisterCount(day);

? ? }

UcenterMemberMapper

????//統(tǒng)計某一天注冊人數(shù),生成統(tǒng)計數(shù)據(jù)

? ? Integer selectRegisterCount(String day);

UcenterMemberMapper.xml

????<select id="selectRegisterCount" resultType="java.lang.Integer">

? ? ? ? SELECT COUNT(*)

? ? ? ? FROM ucenter_member uc

? ? ? ? WHERE DATE(uc.gmt_create) = #{value}

? ? </select>

#############################mapper配置文件中一個或多個參數(shù)##############################

~~~~如UcenterMemberMapper：Integer selectRegisterCount(String day);含有一個參數(shù)

則UcenterMemberMapper.xml中：WHERE DATE(uc.gmt_create) = #{value}的 #{}中的值可任意

~~~~如UcenterMemberMapper：Integer selectRegisterCount(String day，String name);含有兩個參數(shù)

則UcenterMemberMapper.xml中：WHERE DATE(uc.gmt_create) = #{value}的 #{}中的值可通過兩種方式獲取

方式一：根據(jù)參數(shù)的位置獲取 #{0}表示取第一個參數(shù)? #{1}表示取第二個參數(shù)

方式二：Integer selectRegisterCount(@Param("aa") String day，String name);在UcenterMemberMapper.xml中通過#{aa}獲取。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

#################################掃描mapper配置文件需要配置兩個地方######################

pom文件中添加：

<build>

? ? ? ? <resources>

? ? ? ? ? ? <resource>

? ? ? ? ? ? ? ? <directory>src/main/java</directory>

? ? ? ? ? ? ? ? <includes>

? ? ? ? ? ? ? ? ? ? <include>**/*.xml</include>

? ? ? ? ? ? ? ? </includes>

? ? ? ? ? ? ? ? <filtering>false</filtering>

? ? ? ? ? ? </resource>

? ? ? ? </resources>

? ? </build>

resource/application.properties添加：

#配置mapper xml文件的路徑

mybatis-plus.mapper-locations=classpath:com/atguigu/staservice/mapper/xml/*.xml

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

2、在service_statistics模塊創(chuàng)建遠(yuǎn)程調(diào)用接口

創(chuàng)建client包和UcenterClient接口

@Component

@FeignClient("service-ucenter")

public interface UcenterClient {

? ? @GetMapping(value = "/educenter/member/countregister/{day}")

? ? public R countregister(@PathVariable("day") String day);

}

3、在service_statistics模塊調(diào)用微服務(wù)

StatisticsDailyController

@RestController

@RequestMapping("/staservice/sta")

@CrossOrigin

public class StatisticsDailyController {

? ? @Autowired

? ? private StatisticsDailyService statisticsDailyService;


? ? //統(tǒng)計某一天的注冊人數(shù)

? ? @PostMapping("createStatisticsByDate/{day}")

? ? public R createStatisticsByDate(@PathVariable String day) {

? ? ? ? statisticsDailyService.createStatisticsByDay(day);

? ? ? ? return R.ok();

? ? }

}

StatisticsDailyServiceImpl

@Service

public class StatisticsDailyServiceImpl extends ServiceImpl<StatisticsDailyMapper, StatisticsDaily> implements StatisticsDailyService {

? ? @Autowired

? ? private UcenterClient ucenterClient;


? ? //統(tǒng)計某一天的注冊人數(shù)

? ? @Override

? ? public void createStatisticsByDay(String day) {

? ? ? ? //刪除已存在的統(tǒng)計對象

? ? ? ? QueryWrapper<StatisticsDaily> dayQueryWrapper = new QueryWrapper<>();

? ? ? ? dayQueryWrapper.eq("date_calculated", day);

? ? ? ? baseMapper.delete(dayQueryWrapper);


? ? ? ? //獲取統(tǒng)計信息

? ? ? ? R r = ucenterClient.countregister(day);

? ? ? ? Integer register = (Integer)r.getData().get("countRegister");


? ? ? ? Integer loginNum = RandomUtils.nextInt(100, 200);//TODO

? ? ? ? Integer videoViewNum = RandomUtils.nextInt(100, 200);//TODO

? ? ? ? Integer courseNum = RandomUtils.nextInt(100, 200);//TODO


? ? ? ? StatisticsDaily daily = new StatisticsDaily();

? ? ? ? daily.setRegisterNum(register);

? ? ? ? daily.setDateCalculated(day);

? ? ? ? daily.setLoginNum(loginNum);

? ? ? ? daily.setVideoViewNum(videoViewNum);

? ? ? ? daily.setCourseNum(courseNum);

? ? ? ? baseMapper.insert(daily);

? ? }

}

http://localhost:8008/swagger-ui.html

查看數(shù)據(jù)庫：

############################################定時任務(wù)#########################################

四、添加定時任務(wù)

我們現(xiàn)在使用的是SpringBoot工程，整合定時任務(wù)非常方便。

1、在StaApplication啟動類上添加注解

@EnableScheduling ?//開啟定時任務(wù)

2、創(chuàng)建定時任務(wù)類，使用cron表達(dá)式來設(shè)置什么時候去執(zhí)行：(1) cron表達(dá)式也稱為七子表達(dá)式(七域表達(dá)式):設(shè)置執(zhí)行規(guī)則

復(fù)制日期工具類。

在service_statistics中創(chuàng)建schedule包下創(chuàng)建ScheduledTask.java

@Component

public class ScheduledTask {

? ? @Autowired

? ? private StatisticsDailyService statisticsDailyService;

? ? // 0/5 * * * * ?表示每隔5秒執(zhí)行一次這個方法

? ? @Scheduled(cron = "0/5 * * * * ?")

? ? public void task1() {

? ? ? ? System.out.println("**************task1執(zhí)行了..");

? ? }


? ? //在每天凌晨1點(diǎn)，把前一天數(shù)據(jù)進(jìn)行數(shù)據(jù)查詢添加

????@Scheduled(cron = "0 0 1 * * ?")

? ? public void task2(){

? ? ? ? //獲取上一天的日期

? ? ? ? String date = DateUtil.formatDate(DateUtil.addDays(new Date(), -1));

? ? ? ? statisticsDailyService.createStatisticsByDay(date);

? ? }

}

3、在線生成cron表達(dá)式

http://cron.qqe2.com/


02-生成統(tǒng)計數(shù)據(jù)前端整合

一、nginx配置

????????location ~ /staservice/ {

? ? ? ? ? ? proxy_pass http://localhost:8008;

? ? ? ? }

二、前端頁面實(shí)現(xiàn)

1、創(chuàng)建api

創(chuàng)建src/api/sta.js

import?request?from?'@/utils/request'

export?default?{

????//1?生成統(tǒng)計數(shù)據(jù)

????createStaData(day)?{

????????return?request({

????????????url:?'/staservice/sta/createStatisticsByDate/'+day,

????????????method:?'post'

??????????})

????}

}

2、增加路由

src/router/index.js

??{

????path:?'/sta',

????component:?Layout,

????redirect:?'/sta/create',

????name:?'統(tǒng)計分析',

????meta:?{?title:?'統(tǒng)計分析',?icon:?'example'?},

????children:?[

??????{

????????path:?'create',

????????name:?'生成數(shù)據(jù)',

????????component:?()?=>?import('@/views/sta/create'),

????????meta:?{?title:?'生成數(shù)據(jù)',?icon:?'table'?}

??????},

??????{

????????path:?'show',

????????name:?'圖表顯示',

????????component:?()?=>?import('@/views/sta/show'),

????????meta:?{?title:?'圖表顯示',?icon:?'tree'?}

??????}

????]

??},

3、創(chuàng)建組件

src/views/sta/create.vue

模板部分

<template>

??<div?class="app-container">

????<!--表單-->

????<el-form?:inline="true"?class="demo-form-inline">

??????<el-form-item?label="日期">

????????<el-date-picker

??????????v-model="day"

??????????type="date"

??????????placeholder="選擇要統(tǒng)計的日期"

??????????value-format="yyyy-MM-dd"?/>

??????</el-form-item>

??????<el-button

????????:disabled="btnDisabled"

????????type="primary"

????????@click="create()">生成</el-button>

????</el-form>

??</div>

</template>

script部分

<script>

import?sta?from?'@/api/sta'

export?default?{

????data(){

????????return?{

????????????day:'',

????????????btnDisabled:false

????????}

????},

????created()?{

????},

????methods:{

?????????create()?{

?????????????sta.createStaData(this.day).then(response=>{

????????????????//提示信息

????????????????this.$message({

????????????????????type:?'success',

????????????????????message:?'生成數(shù)據(jù)成功!'

????????????????})

????????????????//跳轉(zhuǎn)到圖表顯示頁面

????????????????this.$router.push({path:'/sta/show'})

?????????????})

?????????}

????}

}

</script>

生成日期為2019-01-02的統(tǒng)計數(shù)據(jù)：

查看數(shù)據(jù)庫：


03-統(tǒng)計數(shù)據(jù)圖表顯示

一、ECharts

1、簡介

ECharts是百度的一個項(xiàng)目，后來百度把Echart捐給apache，用于圖表展示，提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日圖，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

官方網(wǎng)站：https://echarts.baidu.com/

2、基本使用

入門參考：官網(wǎng)->文檔->教程->5分鐘上手ECharts

（1）創(chuàng)建html頁面：柱圖.html

（2）引入ECharts

????<!--?引入?echarts.js?-->

????<script?src="echarts.min.js"></script>

（3）定義圖表區(qū)域

? ? <!--?為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om?-->

????<div?id="main"?style="width:?600px;height:400px;"></div>

（4）渲染圖表

<script?type="text/javascript">

????????//?基于準(zhǔn)備好的dom，初始化echarts實(shí)例

????????var?myChart?=?echarts.init(document.getElementById('main'));


????????//?指定圖表的配置項(xiàng)和數(shù)據(jù)

????????var?option?=?{

????????????title:?{

????????????????text:?'ECharts?入門示例'

????????????},

????????????tooltip:?{},

????????????legend:?{

????????????????data:['銷量']

????????????},

????????????xAxis:?{

????????????????data:?["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]

????????????},

????????????yAxis:?{},

????????????series:?[{

????????????????name:?'銷量',

????????????????type:?'bar',

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

????????????}]

????????};


????????//?使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。

????????myChart.setOption(option);

????</script>

3、折線圖

實(shí)例參考：官網(wǎng)->實(shí)例->官方實(shí)例?https://echarts.baidu.com/examples/

折線圖.html

<script?type="text/javascript">

????????//?基于準(zhǔn)備好的dom，初始化echarts實(shí)例

????????var?myChart?=?echarts.init(document.getElementById('main'));

????????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'

????????????}]

????????};

????????//?使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。

????????myChart.setOption(option);

????</script>

二、項(xiàng)目中集成ECharts

1、安裝ECharts

npm install --save echarts@4.1.0

2、增加路由（圖表顯示/views/sta/show）

3、創(chuàng)建組件? /views/sta/show.vue

模板

<template>

??<div?class="app-container">

????<!--表單-->

????<el-form?:inline="true"?class="demo-form-inline">

??????<el-form-item>

????????<el-select?v-model="searchObj.type"?clearable?placeholder="請選擇">

??????????<el-option?label="學(xué)員登錄數(shù)統(tǒng)計"?value="login_num"/>

??????????<el-option?label="學(xué)員注冊數(shù)統(tǒng)計"?value="register_num"/>

??????????<el-option?label="課程播放數(shù)統(tǒng)計"?value="video_view_num"/>

??????????<el-option?label="每日課程數(shù)統(tǒng)計"?value="course_num"/>

????????</el-select>

??????</el-form-item>

??????<el-form-item>

????????<el-date-picker

??????????v-model="searchObj.begin"

??????????type="date"

??????????placeholder="選擇開始日期"

??????????value-format="yyyy-MM-dd"?/>

??????</el-form-item>

??????<el-form-item>

????????<el-date-picker

??????????v-model="searchObj.end"

??????????type="date"

??????????placeholder="選擇截止日期"

??????????value-format="yyyy-MM-dd"?/>

??????</el-form-item>

??????<el-button

????????:disabled="btnDisabled"

????????type="primary"

????????icon="el-icon-search"

????????@click="showChart()">查詢</el-button>

????</el-form>

????<div?class="chart-container">

??????<div?id="chart"?class="chart"?style="height:500px;width:100%"?/>

????</div>

??</div>

</template>

js：暫時顯示臨時數(shù)據(jù)

<script>

import?echarts?from?'echarts'

export?default?{

????data()?{

????????return?{

????????????searchObj:{},

????????????btnDisabled:false

????????}

????},

????methods:{

????????showChart(){

????????????//?基于準(zhǔn)備好的dom，初始化echarts實(shí)例

????????????this.chart?=?echarts.init(document.getElementById('chart'))

????????????//?console.log(this.chart)

????????????//?指定圖表的配置項(xiàng)和數(shù)據(jù)

????????????var?option?=?{

????????????????//?x軸是類目軸（離散數(shù)據(jù)）,必須通過data設(shè)置類目數(shù)據(jù)

????????????????xAxis:?{

????????????????????type:?'category',

????????????????????data:?['Mon',?'Tue',?'Wed',?'Thu',?'Fri',?'Sat',?'Sun']

????????????????},

????????????????//?y軸是數(shù)據(jù)軸（連續(xù)數(shù)據(jù)）

????????????????yAxis:?{

????????????????????type:?'value'

????????????????},

????????????????//?系列列表。每個系列通過?type?決定自己的圖表類型

????????????????series:?[{

????????????????????//?系列中的數(shù)據(jù)內(nèi)容數(shù)組

?????????????????????data:?[820,?932,?901,?934,?1290,?1330,?1320],

????????????????????//?折線圖

????????????????????type:?'line'

????????????????}]

????????????}

????????????this.chart.setOption(option)

????????}

????}

}

</script>

三、完成后端業(yè)務(wù)

1、StatisticsDailyController

//圖表顯示，返回兩部分?jǐn)?shù)據(jù)，日期json數(shù)組，數(shù)量json數(shù)組

? ? @GetMapping("showData/{type}/{begin}/{end}")

? ? public R showData(@PathVariable String type,@PathVariable String begin,

? ? ? ? ? ? ? ? ? ? ? @PathVariable String end){

? ? ? ? Map<String,Object> map = statisticsDailyService.getShowData(type,begin,end);

? ? ? ? return R.ok().data(map);

? ? }

2、service

接口：

????//圖表顯示，返回兩部分?jǐn)?shù)據(jù)，日期json數(shù)組，數(shù)量json數(shù)組

? ? Map<String, Object> getShowData(String type, String begin, String end);

實(shí)現(xiàn)：

? ? ? wrapper.select("date_calculated",type);?

????//圖表顯示，返回兩部分?jǐn)?shù)據(jù)，日期json數(shù)組，數(shù)量json數(shù)組

? ? @Override

? ? public Map<String, Object> getShowData(String type, String begin, String end) {

? ? ? ? //根據(jù)條件查詢對應(yīng)數(shù)據(jù)

? ? ? ? QueryWrapper<StatisticsDaily> wrapper = new QueryWrapper<>();

? ? ? ? wrapper.between("date_calculated",begin,end);

? ? ? ? wrapper.select("date_calculated",type);?

? ? ? ? List<StatisticsDaily> staList = baseMapper.selectList(wrapper);


? ? ? ? //因?yàn)榉祷赜袃刹糠謹(jǐn)?shù)據(jù)：日期 和 日期對應(yīng)數(shù)量

? ? ? ? //前端要求數(shù)組json結(jié)構(gòu)，對應(yīng)后端java代碼是list集合

? ? ? ? //創(chuàng)建兩個list集合，一個日期list，一個數(shù)量list

? ? ? ? List<String> date_calculatedList = new ArrayList<>();

? ? ? ? List<Integer> numDataList = new ArrayList<>();


? ? ? ? for (int i = 0; i < staList.size(); i++) {

? ? ? ? ? ? StatisticsDaily daily = staList.get(i);

? ? ? ? ? ? //封裝日期list集合

? ? ? ? ? ? date_calculatedList.add(daily.getDateCalculated());


? ? ? ? ? ? //封裝對應(yīng)數(shù)量

? ? ? ? ? ? switch (type) {

? ? ? ? ? ? ? ? case "login_num":

? ? ? ? ? ? ? ? ? ? numDataList.add(daily.getLoginNum());

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? case "register_num":

? ? ? ? ? ? ? ? ? ? numDataList.add(daily.getRegisterNum());

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? case "video_view_num":

? ? ? ? ? ? ? ? ? ? numDataList.add(daily.getVideoViewNum());

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? case "course_num":

? ? ? ? ? ? ? ? ? ? numDataList.add(daily.getCourseNum());

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? default:

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? }

? ? ? ? }


? ? ? ? //把封裝之后兩個list集合放到map集合，進(jìn)行返回

? ? ? ? Map<String, Object> map = new HashMap<>();

? ? ? ? map.put("date_calculatedList",date_calculatedList);

? ? ? ? map.put("numDataList",numDataList);

? ? ? ? return map;

? ? }

四、前后端整合

1、創(chuàng)建api

src/api/sta.js中添加方法

??//2?獲取統(tǒng)計數(shù)據(jù)

????getDataSta(searchObj)?{

????????return?request({

????????????url:?`/staservice/sta/showData/${searchObj.type}/${searchObj.begin}/${searchObj.end}`,

????????????method:?'get'

? ? ? ? })

????}

2、show.vue中引入api模塊、修改方法、修改options中的數(shù)據(jù)

<script>

import?echarts?from?'echarts'

import?staApi?from?'@/api/sta'

export?default?{

????data()?{

????????return?{

????????????searchObj:{},

????????????btnDisabled:false,

????????????xData:[],

????????????yData:[]

????????}

????},

????methods:{

????????showChart(){

????????????staApi.getDataSta(this.searchObj).then(response=>{

????????????????console.log('*****************'+response)

????????????????this.yData?=?response.data.numDataList ? ?? //日期

????????????????this.xData?=?response.data.date_calculatedList ? //值

????????????????//調(diào)用下面生成圖表的方法，改變值

????????????????this.setChart()

????????????})

????????},

????????setChart(){

????????????//?基于準(zhǔn)備好的dom，初始化echarts實(shí)例

????????????this.chart?=?echarts.init(document.getElementById('chart'))

????????????//?console.log(this.chart)

????????????//?指定圖表的配置項(xiàng)和數(shù)據(jù)

????????????var?option?=?{

????????????????//?x軸是類目軸（離散數(shù)據(jù)）,必須通過data設(shè)置類目數(shù)據(jù)

????????????????xAxis:?{

????????????????????type:?'category',

????????????????????data:?this.xData

????????????????},

????????????????//?y軸是數(shù)據(jù)軸（連續(xù)數(shù)據(jù)）

????????????????yAxis:?{

????????????????????type:?'value'

????????????????},

????????????????//?系列列表。每個系列通過?type?決定自己的圖表類型

????????????????series:?[{

????????????????????//?系列中的數(shù)據(jù)內(nèi)容數(shù)組

????????????????????data:?this.yData,

????????????????????//?折線圖

????????????????????type:?'line'

????????????????}]

????????????}

????????????this.chart.setOption(option)

????????}

????}

}

</script>

五、樣式調(diào)整

參考配置手冊：https://echarts.baidu.com/option.html#title

1、顯示標(biāo)題

?????title:?{

????????????????????text:?'數(shù)據(jù)統(tǒng)計'

????????????????},

2、x坐標(biāo)軸觸發(fā)提示

????tooltip:?{

????????????????????trigger:?'axis'

????????????????},

3、區(qū)域縮放

dataZoom:?[{

????????????????????show:?true,

????????????????????height:?30,

????????????????????xAxisIndex:?[

????????????????????????0

????????????????????],

????????????????????bottom:?30,

????????????????????start:?10,

????????????????????end:?80,

????????????????????handleIcon:?'path://M306.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:?'#90979c'

????????????????????},

????????????????????{

????????????????????type:?'inside',

????????????????????show:?true,

????????????????????height:?15,

????????????????????start:?1,

????????????????????end:?35

?????????????????}],

添加在option中：

測試：

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容