“This is the seventh day of my participation in the First Challenge 2022.

This article focuses on Echarts charts and the Markdown editor

1. Echarts chart

Echarts charts are intuitive, manage data through data sets, support data filtering, clustering, regression, and help achieve multidimensional analysis of the same data.

Echarts chart rich and colorful, intuitive, compared to the number, more image, in the music system to increase the Echarts chart, more rich, let a person shine at the moment.

Let’s go straight to the code

Introduce the echarts.js file into your project

1, the front end

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: "Chart of Singer Fever.".subtext: '* Real-time statistics *'
       },
       tooltip: {
           trigger: 'item'.formatter: '{a} <br/>{b}: {c} ({d}%)'
       },
       legend: {
           orient: 'vertical'.right: 10.data: names
       },
       series: [{name: 'Name of singer'.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
           }
       ]
   };
   // Display the chart using the configuration items and data you just specified.
   myChart.setOption(option);
}
Copy the code

The title tag, text is the name of the title, and subtext is the subtitle. Tooltip is the tooltip and formatter is the format.

2. Back-end code

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

The back-end code is relatively simple, is to query information. Feedback the query information to the front end, in the form of echarts chart.

Second, markdown editor

The Markdown editor, it’s a text editor, so if we’re going to write an announcement on the music system, we’re going to publish information, and there’s a lot of text, that’s where the Markdown editor comes in. In addition to large text output, the Markdown editor also supports image, file, audio, and even video insertion. Text content can support bold font, italic font, change color font and so on, I in the original editor, also wide to change its functions, rich and diverse, such as the new Markdown editor local upload picture function, add a large number of emoji, can be used for article editing.

Use:

Just insert the Ckeditor plug-in into your project.

Copy a paragraph of text + picture to achieve the effect: