[echarts] Requirements encountered by echarts & implementation method record posts (1)

series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      label: {
        show: true, // 柱状图是否显示数据
        position: 'top',  // 数据方向
        color: '#0e87ff' //文字颜色
      },
    }
  ]

2. Requirement: When the mouse hovers over the chart, there is a shadow and the floating window and data are displayed

Implementation: option ==> tooltip

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: { 
      trigger: 'axis', //坐标轴触发，没有会触发不了阴影
      axisPointer: { //鼠标悬浮到图上，可以出现标线和刻度文本
      type: 'shadow' , //坐标轴触发，没有会触发不了阴影
    },
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      label: {
        show: true,
        position: 'top', 
        color: '#0e87ff'
      },
    }
  ]
};

3. Requirements: multi-discount/multi-column charts (with multiple data series)

Implementation: series ==> multiple objects

  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      label: {
        show: true,
        position: 'top', 
        color: '#0e87ff'
      },
    },
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      label: {
        show: true,
        position: 'top', 
        color: '#0e87ff'
      },
    }
  ]

4. Requirements: add a shadow below the line chart

Realization: add the property areaStyle to the series object

          series: [
            {
              name: '折线',
              data: this.testData,
              type: 'line',
              areaStyle: {
                opacity: 0.3 // 修改阴影透明度
              }
            },

5. Requirements: The entire legend layer is placed in the middle of the chart, the horizontal legend, the legend mark is a rounded rectangle, and the legend mark is on the right side of the text (common for discounted/column/pie charts)

Implementation: option ==> legend

          legend: {
            orient: 'horizontal', // 图例是纵向还是横向
            align: 'right', // 文字在图标左还是右
            left: 'center', // 整个图例层的位置
            icon: 'roundRect', // 图例形状-圆角矩形
            textStyle: {
              color: '#000' // 修改图例文字颜色
            }
          },

Legend shape/custom reference: Documentation - Apache ECharts

6. Requirements: Change the style of the number axis, and display all the labels without folding or rotating when there are many labels on the number axis

Implementation: Add axisLabel (axis label text style) and axisLine (axis style) under the configuration item of the corresponding axis

  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel: { //设置轴文字样式
              fontSize: 12,
              color: '#000',
              interval: 0, // 强制标签不重叠
              rotate:0 // 强制标签不旋转显示
            },
            axisLine: {
              show: true, //取消轴线
              lineStyle: {
                color: 'red' // x轴线颜色
              }
            },

  },

7. Requirements: Modify (remove) the background axis (the default is to modify the y-axis)

Implementation: yAxis ==> splitLine configuration item

Note: Modify the horizontal background axis style configuration item is written under the y-axis configuration item

  yAxis: {
    type: 'value',
    splitLine: { 
      show: true,
      lineStyle: {
        color: 'blue'
      }
    }
  },

8. Requirement: change the size of the chart

Implementation: option ==> grid

Note: The setting here is the distance from the chart wrapping object to the chart

          grid:{ //整个图表的大小
            top: '50%',
            bottom: '10%',
            left: '10%',
            right: '7%'
          },

9. Requirement: Add a text title in the middle of the ring chart

Implementation: option ==> title

          title: {
            text: '添加\n标题', // \n分行
            top: 'center',
            left: 'center',
            textStyle: {
              fontSize: 30,
              color: '#00E5FF',
              lineHeight:50 // 有分行 用于调整文字间距
            }
          },