2022首次更文挑战第7天 | 基于SSM的音乐系统教程06Echarts图表和markdown编辑器

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」

这篇主要讲Echarts图表和markdown编辑器

一、Echarts图表

Echarts图表直观，通过数据集管理数据，支持数据过滤、聚类、回归，帮助实现同一份数据的多维度分析。

Echarts图表丰富多彩，直观，相比数字，更加形象，在音乐系统上增加Echarts图表，更加丰富，让人眼前一亮。

来，直接上代码

在项目中引入echarts.js文件

1、前端

function singerCount() {
   var myChart = echarts.init(document.getElementById("singer"));
   var names = [];
   var counts = [];
   $.ajax({
       type: "post",
       url: "/music/music/stat/singer-count.do",
       dataType: 'json',
       async: false
   }).success(function (message) {
       names = message[0];
       counts = message[1];
   });
   option = {
       title: {
           text: "歌手热力图",
           subtext: '*实时统计*'
       },
       tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b}: {c} ({d}%)'
       },
       legend: {
           orient: 'vertical',
           right: 10,
           data: names
       },
       series: [
           {
               name: '歌手名称',
               type: 'pie',
               radius: ['50%', '70%'],
               avoidLabelOverlap: false,
               label: {
                   normal: {
                       show: false,
                       position: 'center'
                   },
                   emphasis: {
                       show: true,
                       textStyle: {
                           fontSize: '30',
                           fontWeight: 'bold'
                       }
                   }
               },
               labelLine: {
                   normal: {
                       show: false
                   }
               },
               data: counts
           }
       ]
   };
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
}

title标签，text是标题的名字，subtext是子标题。 tooltip是工具tip，formatter是格式。

2、后端代码

@RequestMapping("/singer-count")
@ResponseBody
public List<Object>[] singerCount() {
    List<SingerCountVo> list = singerMapper.selectSingerCount();
    return (List<Object>[]) new List<?>[]{
     list.stream().map(SingerCountVo::getName).collect(Collectors.toList()),
            list};
}

后端代码比较简单，就是查询信息即可。把查询出来的信息反馈给前端，用echarts图表的形式表现出来。

二、markdown编辑器

markdown编辑器，是个文本编辑器，如果我们要在音乐系统上写个公告，发布信息，文本内容比较多的时候，这时候markdown编辑器就派上用场了。markdown编辑器除了支持大文本内容输出，还支持，图片，文件，音频，甚至是视频插入。文本内容，可以支持加粗字体，斜体，改变颜色字体等等，我在原有的编辑器，还阔以进行改变它的功能，丰富多样，比如新增markdown编辑器本地上传图片功能，增加大量的emoji表情，可用于文章编辑使用。

使用：

在项目中插入ckeditor插件即可。

复制一段文字+图片的信息，实现效果：