[echarts] requirements encountered by echarts & implementation methods (2)

1. Requirements: cancel the coordinate axis scale (common for polyline/histogram)

Implementation: Coordinate axis configuration item ==> axisTick

            axisTick: {
              show: false  //取消刻度
            },

 2. Requirements: Add units to the coordinate axes

Implementation: coordinate axis ==> name, nameTextStyle

  yAxis: {
    type: 'value',
    name: '(人)', //坐标轴名称
    nameTextStyle: {
      fontSize: 14, // 坐标轴名称样式
      align: 'right', //坐标轴名称水平对齐
      color: '#000',
    },
    nameGap: 45, // 坐标轴名称和轴的距离
  },

 3. Requirement: Set the maximum interval of coordinate axis data

Implementation: coordinate axis ==> maxInterval

  yAxis: {
    type: 'value',
    maxInterval: 15,
  },

 4. Requirement: Change the column width of the histogram

Implementation: add barWidth attribute under the series object

  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      barWidth: 25,//调整柱状宽度
    },
]

 5. Requirements: change the size of the inner and outer radii of the ring graph

Implementation: add radius['inner radius','outer radius'] to the series object

 series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '80%'],
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]

6. Requirement: Pie chart labels do not overlap

Implementation: add avoidLabelOverlap: true to the series object

7. Requirements: Set the label guide line for the pie chart, and put the label outside

Implementation: series object ==> label, labelLine configuration items

              label: {
                show: true,
                position: 'outside', // 标签位置
                formatter: '{b}\n{c}',
                color: 'red',
              },
               labelLine: {
                normal: {
                  show: true,
                  length: 15,  // 第一段引导线
                  length2: 10, // 第二段引导线
                  lineStyle: {
                    type: 'solid',
                  },
                }
             

 8. Requirement: When the mouse moves to a block in the ring chart, the zoom-in animation will not be displayed

Implementation: Add hoverAnimation: false to the series object