Day215.课程详细页面功能完善、Echarts统计分析模块[生成统计数据+生成图表]前后端整合 -谷粒学院

谷粒学院

课程详细页面功能完善

一、修改课程详细接口

1、在service_order模块添加接口

用于判断订单中status值是否为1，为1则为已支付

@RestController
@CrossOrigin
@RequestMapping("/eduorder/t-order")
public class TOrderController {
    
    

    @Autowired
    private TOrderService tOrderService;
	
    .........
    
    //根据【用户id、课程id】查询订单表中的状态
    @GetMapping("/isBuyCourse/{memberId}/{courseId}")
    public Boolean isBuyCourse(@PathVariable String memberId,@PathVariable String courseId)	  {
    
    
        QueryWrapper<TOrder> wrapper = new QueryWrapper<>();
        wrapper.eq("course_id",courseId);
        wrapper.eq("member_id",memberId);
        wrapper.eq("status",1);//支付状态 【1】代表已支付
        int result = tOrderService.count(wrapper);

        if (result>0){
    
    //已支付
            return true;
        }else {
    
    
            return false;
        }
    }

}

2、在service_edu模块课程详情接口远程调用

（1）创建OrderClient接口

• com.achang.eduservice.client.OrderClient

确保加入nacos注册中心配置文件，且在主配置类标注@EnableFeignClients

@Component
@FeignClient(value = "service-order",fallback = OrderClientImpl.class)
public interface OrderClient {
    
    

    //根据【用户id、课程id】查询订单表中的状态
    @GetMapping("/eduorder/t-order/isBuyCourse/{memberId}/{courseId}")
    public Boolean isBuyCourse(@PathVariable("memberId") String memberId, @PathVariable("courseId") String courseId);


}

• OrderClientImpl

兜底方法

@Component
public class OrderClientImpl implements OrderClient {
    
    
    @Override
    public Boolean isBuyCourse(String memberId, String courseId) {
    
    
        return null;
    }
}

（2）修改之前的课程详情接口调用

• com.achang.eduservice.controller.front.CourseFrontController

@RestController
@CrossOrigin
@RequestMapping("/eduservice/courseFront")
public class CourseFrontController {
    
    

    @Autowired
    private EduCourseService eduCourseService;
    
    @Autowired
    private EduChapterService eduChapterService;

    @Autowired
    private OrderClient orderClient;
    
    ..........

    //课程详情的方法
    @GetMapping("/getFrontCourseInfo/{courseId}")
    public R getFrontCourseInfo(@PathVariable("courseId") String courseId, HttpServletRequest request){
    
    
        boolean isBuyCourse = false;

        //根据课程id，编写sql语句查询课程信息
        CourseWebVo courseWebVo = eduCourseService.getBaseCourseInfo(courseId);

        //根据课程id，查询章节和小节信息
        List<ChapterVo> chapterVideoList = eduChapterService.getChapterVideoByCourseId(courseId);

        //获取用户id
        String memberId = JwtUtils.getMemberIdByJwtToken(request);

        if (!StringUtils.isEmpty(memberId)){
    
    
            //根据课程id、用户id，查询课程是否已经购买
            isBuyCourse = orderClient.isBuyCourse(memberId, courseId);
        }

        return R.ok().data("courseWebVo",courseWebVo).data("chapterVideoList",chapterVideoList).data("isBuy",isBuyCourse);

    }

}

---

二、修改课程详情页面

三、测试

---

统计分析功能（生成统计数据）

0、需求分析

一、数据库设计

1、数据库

guli_statistics

2、数据表

#
# Structure for table "statistics_daily"
#

CREATE TABLE `statistics_daily` (
  `id` char(19) NOT NULL COMMENT '主键',
  `date_calculated` varchar(20) NOT NULL COMMENT '统计日期',
  `register_num` int(11) NOT NULL DEFAULT '0' COMMENT '注册人数',
  `login_num` int(11) NOT NULL DEFAULT '0' COMMENT '登录人数',
  `video_view_num` int(11) NOT NULL DEFAULT '0' COMMENT '每日播放视频数',
  `course_num` int(11) NOT NULL DEFAULT '0' COMMENT '每日新增课程数',
  `gmt_create` datetime NOT NULL COMMENT '创建时间',
  `gmt_modified` datetime NOT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `statistics_day` (`date_calculated`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='网站统计日数据';

#
# Data for table "statistics_daily"
#

二、创建微服务

1、在service模块下创建子模块

service_statistics

2、application.properties

resources目录下创建文件

# 服务端口
server.port=8008

# 服务名
spring.application.name=service-statistics

# mysql数据库连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/guli?serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=00000

# 返回json的全局格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8

# 配置mybatis xml文件的路径
mybatis-plus.mapper-locations=classpath:com.achang.staservice.mapper.xml/*.xml

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

# nacos服务地址
spring.cloud.nacos.discovery.server-addr=localhost:8848

# 开启熔断机制
feign.hystrix.enabled=true

# 设置hystrix超时时间，默认1000ms
hystrix.command.default.execution.isolation.thread.timeoutInMilliseconds=3000

3、MP代码生成器生成代码

@Test
public void run(){
    
    
    // 1、创建代码生成器
    AutoGenerator mpg = new AutoGenerator();

    // 2、全局配置
    GlobalConfig gc = new GlobalConfig();
    String projectPath = System.getProperty("user.dir");
    gc.setOutputDir("D:\\JavaStudy\\gulixueyuan\\guli_parent\\service\\service_statistics" + "/src/main/java"); //输出目录

    gc.setAuthor("achang"); //作者名
    gc.setOpen(false); //生成后是否打开资源管理器
    gc.setFileOverride(false); //重新生成时文件是否覆盖

    gc.setServiceName("%sService");	//去掉Service接口的首字母I
    gc.setIdType(IdType.ID_WORKER_STR); //主键策略
    gc.setDateType(DateType.ONLY_DATE);//定义生成的实体类中日期类型
    gc.setSwagger2(true);//开启Swagger2模式

    mpg.setGlobalConfig(gc);

    // 3、数据源配置
    DataSourceConfig dsc = new DataSourceConfig();
    dsc.setUrl("jdbc:mysql://localhost:3306/guli?serverTimezone=GMT%2B8");
    dsc.setDriverName("com.mysql.cj.jdbc.Driver");
    dsc.setUsername("root");
    dsc.setPassword("00000");
    dsc.setDbType(DbType.MYSQL);
    mpg.setDataSource(dsc);

    // 4、包配置
    PackageConfig pc = new PackageConfig();

    //生成包：com.achang.eduservice
    pc.setModuleName("staservice"); //模块名
    pc.setParent("com.achang");

    //生成包：com.achang.oss.controller
    pc.setController("controller");
    pc.setEntity("entity");
    pc.setService("service");
    pc.setMapper("mapper");
    mpg.setPackageInfo(pc);

    // 5、策略配置
    StrategyConfig strategy = new StrategyConfig();
    strategy.setInclude("statistics_daily");//根据数据库哪张表生成，有多张表就加逗号继续填写

    strategy.setNaming(NamingStrategy.underline_to_camel);//数据库表映射到实体的命名策略
    strategy.setTablePrefix("statistics" + "_"); //生成实体时去掉表前缀

    strategy.setColumnNaming(NamingStrategy.underline_to_camel);//数据库表字段映射到实体的命名策略
    strategy.setEntityLombokModel(true); // lombok 模型 @Accessors(chain = true) setter链式操作

    strategy.setRestControllerStyle(true); //restful api风格控制器
    strategy.setControllerMappingHyphenStyle(true); //url中驼峰转连字符

    mpg.setStrategy(strategy);

    // 6、执行
    mpg.execute();

}

4、创建SpringBoot启动类

@SpringBootApplication
@EnableFeignClients
@MapperScan("com.achang.staservice.mapper")
@EnableDiscoveryClient //开启服务发现
@ComponentScan("com.achang")
public class staserviceMain8008 {
    
    
    public static void main(String[] args) {
    
    
        SpringApplication.run(staserviceMain8008.class,args);
    }
}

三、实现服务调用

1、在service_ucenter模块创建接口，统计某一天的注册人数

• controller

@RestController
@RequestMapping("/serviceUcenter/ucenter-member")
@CrossOrigin
public class UcenterMemberController {
    
    

    @Autowired
    private UcenterMemberService ucenterMemberService;
	
    ........
    
    //根据日期，获取那天注册人数
    @GetMapping("/countRegister/{day}")
    public R countRegister(@PathVariable String day){
    
    
        Integer count = ucenterMemberService.getCountRegister(day);
        return R.ok().data("countRegister",count);
    }

}

• service

接口

public interface UcenterMemberService extends IService<UcenterMember> {
    
    
    
    ...........
    
    //根据日期，获取那天注册人数
    Integer getCountRegister(String day);
}

impl

@Service
public class UcenterMemberServiceImpl extends ServiceImpl<UcenterMemberMapper, UcenterMember> implements UcenterMemberService {
    
    

    @Autowired
    private RedisTemplate<String,String> redisTemplate;

   ...........
    
    //根据日期，获取那天注册人数
    @Override
    public Integer getCountRegister(String day) {
    
    
        return baseMapper.getCountRegister(day);
    }

}

• mapper

接口

public interface UcenterMemberMapper extends BaseMapper<UcenterMember> {
    
    
    Integer getCountRegister(String day);
}

xml

<select id="getCountRegister" resultType="java.lang.Integer">
    select count(1)
    from ucenter_member
    where date(gmt_create) = #{
    
    day}
</select>

---

​

2、在service_statistics模块创建远程调用接口

创建client包和UcenterClient接口和impl

• 接口

@Component
@FeignClient(value = "service-ucenter",fallback = UcenterClientImpl.class)
public interface UcenterClient {
    
    
    //根据日期，获取那天注册人数
    @GetMapping("/serviceUcenter/ucenter-member/countRegister/{day}")
    public R countRegister(@PathVariable("day") String day);
}

• impl

兜底方法

@Component
public class UcenterClientImpl implements UcenterClient {
    
    
    @Override
    public R countRegister(String day) {
    
    
        return null;
    }
}

3、在service_statistics模块调用微服务

• controller

@RestController
@RequestMapping("/staservice/daily")
@CrossOrigin //解决跨域问题
public class DailyController {
    
    

    @Autowired
    private DailyService dailyService;

    //统计某一天注册人数
    @PostMapping("/createStatisticsByDay/{day}")
    public R createStatisticsByDay(@PathVariable String day){
    
    
        dailyService.createStatisticsByDay(day);
        return R.ok();
    }
    
}

• service

impl

@Service
public class DailyServiceImpl extends ServiceImpl<DailyMapper, Daily> implements DailyService {
    
    

    @Autowired
    private UcenterClient ucenterClient;

    //统计某一天注册人数
    @Override
    public void createStatisticsByDay(String day) {
    
    
        //添加之前先删除表相同的数据
        QueryWrapper<Daily> wrapper = new QueryWrapper<>();
        wrapper.eq("date_calculated",day);
        baseMapper.delete(wrapper);


        //远程调用得到某一天的注册人数
        R registerR = ucenterClient.countRegister(day);
        Integer countRegister = (Integer) registerR.getData().get("countRegister");

        //其他的数据类似，也是通过远程调用，获取数据返回即可，下面使用随机数模拟

        //把获取到的数据
        Daily daily = new Daily();
        daily.setRegisterNum(countRegister);//注册人数
        daily.setCourseNum(RandomUtils.nextInt(100,200));
        daily.setLoginNum(RandomUtils.nextInt(200,300));//登录数
        daily.setVideoViewNum(RandomUtils.nextInt(200,300));//视频流量数
        daily.setDateCalculated(day);//统计日期

        //添加到数据库中
        baseMapper.insert(daily);

    }

}

接口

public interface DailyService extends IService<Daily> {
    
    
    //统计某一天注册人数
    void createStatisticsByDay(String day);
}

• 测试，启动两个访问

访问：localhost:8008/swagger-ui.html

• 记住给实体类添加

• 配置nginx

---

---

测试成功

---

四、添加定时任务

在特定的时间，让程序自动执行，闹钟一样

七子表达式，总共有7位，但是springboot整合只整合了前面6位，最后一位的年没有整合，直接默认是每年

1、在启动类上添加注解

@EnableScheduling 开启定时任务

2、创建定时任务类，使用cron表达式

com.achang.staservice.schedule.ScheduledTask

@Component
public class ScheduledTask {
    
    

    //（0/5 * * * * ？）：每隔5秒执行一次
    @Scheduled(cron = "0/5 * * * * ?")//指定cron表达式规则
    public void task01(){
    
    
        System.out.println("=========我执行了");

    }
}

---

• 通过工具类，在每天凌晨1点执行方法，把前一天的数据查询进行添加

@Component
public class ScheduledTask {
    
    

    @Autowired
    private DailyService dailyService;

    //在每天凌晨1点执行方法，把前一天的数据查询进行添加
    @Scheduled(cron = "0 0 1 * * ? ")//指定cron表达式规则
    public void task02(){
    
    
        dailyService.createStatisticsByDay(DateUtil.formatDate(DateUtil.addDays(new Date(), -1)));
    }

}

3、在线生成cron表达式

网上一大堆，随便找

http://cron.qqe2.com/

---

统计数据前端整合

一、前端页面实现

1、添加路由

guli-admin\src\router\index.js

  //统计分析
  {
    
    
    path: '/sta',
    component: Layout,
    redirect: '/sta/create',
    name: '统计分析',
    meta: {
    
     title: '统计分析', icon: 'nested' },
    children: [
      {
    
    
        path: 'create',
        name: '生成数据',
        component: () => import('@/views/sta/create.vue'),
        meta: {
    
     title: '生成数据', icon: 'table' }
      },
      {
    
    
        path: 'show',
        name: '图表显示',
        component: () => import('@/views/sta/show.vue'),
        meta: {
    
     title: '图表显示', icon: 'nested' }
      }
    ]
  },

2、创建api

import request from '@/utils/request' //引入已经封装好的axios 和 拦截器

export default{
    
    
    //生成统计数据
    createStaByDay(day){
    
    
        return request({
    
    
            url:'/staservice/daily/createStatisticsByDay/'+day,
            method: 'post'
        })
    }
    
}

3、创建组件

guli-admin\src\views\sta\create.vue

• create

html页面

<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="选择要统计的日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-button :disabled="btnDisabled" type="primary" @click="create()"
        >生成</el-button
      >
    </el-form>
  </div>
</template>

js脚本

<script>
import staApi from "@/api/sta";
export default {
    
    
  data() {
    
    
    return {
    
    
      day: "",
      btnDisabled: false,
    };
  },
  created() {
    
    },
  methods: {
    
    
    create() {
    
    
      staApi.createStaByDay(this.day).then((resp) => {
    
    
        //提示
        this.$message({
    
    
          type: "success",
          message: "生成成功!",
        });
        //跳转页面到show
        this.$router.push({
    
    path:'/sta/show'})
      });
    },
  },
};
</script>

• 效果

测试成功

---

统计数据图表显示ECharts

一、ECharts

1、简介

ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
官方网站：https://echarts.baidu.com/

2、基本使用

入门参考：官网->文档->教程->5分钟上手ECharts

（1）创建html页面：柱图.html

（2）引入ECharts

<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>

（3）定义图表区域

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

（4）渲染图表

<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
    
    
  title: {
    
    
    text: "ECharts 入门示例",
  },
  tooltip: {
    
    },
  legend: {
    
    
    data: ["销量"],
  },
  xAxis: {
    
    
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  },
  yAxis: {
    
    },
  series: [
    {
    
    
      name: "销量",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

3、折线图

实例参考：官网->实例->官方实例 https://echarts.baidu.com/examples/

折线图.html

<script>
var myChart = echarts.init(document.getElementById("main"));
var option = {
    
    
  //x轴是类目轴（离散数据）,必须通过data设置类目数据
  xAxis: {
    
    
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  //y轴是数据轴（连续数据）
  yAxis: {
    
    
    type: "value",
  },
  //系列列表。每个系列通过 type 决定自己的图表类型
  series: [
    {
    
    
      //系列中的数据内容数组
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      //折线图
      type: "line",
    },
  ],
};
myChart.setOption(option);
</script>

---

二、项目中集成ECharts

1、安装ECharts

npm install --save [email protected]

2、路由

src/router/index.js

在统计分析路由中增加子路由

3、创建组件

guli-admin\src\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="学员登录数统计" value="login_num" />
          <el-option label="学员注册数统计" value="register_num" />
          <el-option label="课程播放数统计" value="video_view_num" />
          <el-option label="每日课程数统计" 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：暂时显示临时数据

<script>
import echarts from "echarts";
export default {
    
    
  data() {
    
    
    return {
    
    
      searchObj: {
    
    
        begin: "",
        end: "",
        type: "",
      },
      btnDisabled: false,
      chart: null,
      title: "",
      xData: [],
      yData: [],
    };
  },
  methods: {
    
    
    showChart() {
    
    
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById("chart"));
      // console.log(this.chart)
      // 指定图表的配置项和数据
      var option = {
    
    
        // x轴是类目轴（离散数据）,必须通过data设置类目数据
        xAxis: {
    
    
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        // y轴是数据轴（连续数据）
        yAxis: {
    
    
          type: "value",
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [
          {
    
    
            // 系列中的数据内容数组
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            // 折线图
            type: "line",
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
  created() {
    
    },
};
</script>

三、完成后端业务

1、controller

@RestController
@RequestMapping("/staservice/daily")
@CrossOrigin //解决跨域问题
public class DailyController {
    
    

    @Autowired
    private DailyService dailyService;
    
    .............

    //图表显示，返回两部分数据，日期json数组，数量json数组
    @GetMapping("/showData/{type}/{begin}/{end}")
    public R showData(@PathVariable String type,@PathVariable String begin,@PathVariable String end){
    
    

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

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

}

2、service

• 接口

public interface DailyService extends IService<Daily> {
    
    

	.........
    
    //图表显示，返回两部分数据，日期json数组，数量json数组
    Map<String, Object> getShowData(String type, String begin, String end);
}

• impl

@Service
public class DailyServiceImpl extends ServiceImpl<DailyMapper, Daily> implements DailyService {
    
    

    @Autowired
    private UcenterClient ucenterClient;

	............

    //图表显示，返回两部分数据，日期json数组，数量json数组
    @Override
    public Map<String, Object> getShowData(String type, String begin, String end) {
    
    
        //根据条件查询对应的数据
        QueryWrapper<Daily> wrapper = new QueryWrapper<>();
        wrapper.select("date_calculated",type);
        wrapper.between("date_calculated",begin,end);

        List<Daily> dailyList = baseMapper.selectList(wrapper);

        //前端要求数组json结果，对应后端为List集合
        //创建两个list集合，一个放日期X轴，一个放数量Y轴
        List<String> xlist = new ArrayList<>();
        List<Integer> ylist = new ArrayList<>();

        for (Daily daily : dailyList) {
    
    
            xlist.add(daily.getDateCalculated());

            //判断查询的哪个字段
            if ("register_num".equals(type)){
    
    
                ylist.add(daily.getRegisterNum());
            }
            if ("login_num".equals(type)){
    
    
                ylist.add(daily.getLoginNum());
            }
            if ("video_view_num".equals(type)){
    
    
                ylist.add(daily.getVideoViewNum());
            }
            if ("course_num".equals(type)){
    
    
                ylist.add(daily.getCourseNum());
            }

        }
        HashMap<String, Object> map = new HashMap<>();
        map.put("xlist",xlist);
        map.put("ylist",ylist);

        return map;
    }

}

• 测试

---

四、前后端整合

1、创建api

guli-admin\src\api\sta.js中添加方法

import request from '@/utils/request' //引入已经封装好的axios 和 拦截器

export default {
    
    
	
    .......
    
    //图表显示
    getShowData(searchObj) {
    
    
        return request({
    
    
            url: `/staservice/daily/showData/${
      
      searchObj.type}/${
      
      searchObj.begin}/${
      
      searchObj.end}`,
            method: 'get'
        })
    }

}

2、show.vue中引入api模块

import staApi from '@/api/sta.js'

3、js脚本

export default {
    
    
  data() {
    
    
    return {
    
    
      searchObj: {
    
    
        begin: "",
        end: "",
        type: "",
      },
      btnDisabled: false,
      chart: null,
      title: "",
      xData: [],
      yData: [],
    };
  },
  methods: {
    
    
    setChart() {
    
    
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById("chart"));
      // console.log(this.chart)
      // 指定图表的配置项和数据
      var option = {
    
    
        // 
        xAxis: {
    
    
          type: "category",
          data:this.xData,//x轴数据
        },
        // 
        yAxis: {
    
    
          type: "value",
        },
        series: [
          {
    
    
            // 系列中的数据内容数组
            data:this.yData,//y轴数据
            // 折线图
            type: "line",//type 决定自己的图表类型
          },
        ],
      };
      this.chart.setOption(option);
    },
    showChart(){
    
    
        staApi.getShowData(this.searchObj).then(resp=>{
    
    
            //x轴 时间
            this.xData = resp.data.xlist
            //y轴 数据
            this.yData = resp.data.ylist

            //调用下面生成图表方法，改变值
            this.setChart();
        })
    }
  },
  created() {
    
    },
};
</script>

• 测试

---

五、样式调整

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

• 写到option里面

1、显示标题

title: {
    
    
    text: this.title
},

2、x坐标轴触发提示

tooltip: {
    
    
    trigger: 'axis'
},

3、区域缩放

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,
    },
],

---