1. Overlapping and confusing charts

❓ Scenario 1: The dropdown toggles echarts charts, but the charts overlap and are confused

💬 Cause: Clear is not reset

✅ solution: true or clear two kinds of write one kind of line

  • myChart.clear()

  • myChart.setOption(option, true)

    If set to true, this is notMerge. If set to false, this is Merge

❓ scenario 2: There is another situation that can be solved by using clear, that is, fast switch TAB prompt box does not disappear at this time, using clear can also be cleared

2. Dom elements cannot be found

❓ : TypeError: Cannot read property ‘getAttribute’ of undefined, add v-if/v-else to refs

💬 cause: In mounted loading, v-if killed the DOM. In Mounted loading, the DOM does not exist at all. The first rendering active is 0 on the first TAB, so it does not render unless I default active to third TAB.

✅ fix: Use v-show to make dom present on first rendering

3. How to display “No data” when there is no data in the icon?

If nothing is done, then no data will be displayed in addition to the previous data configuration

✅To solve: Mask with showLoading

 if (没有数据的情况) {
        this.myChart.showLoading({
          text: 'No data at present'.color: '#ffffff'.textColor: '#8a8e91'.maskColor: 'rgba(255, 255, 255, 1)'})},// Close the mask when the interface is finished
  async getcompleteDetail (type) {
      const re = await getcompleteDetail(params)
      this.activityListinComplete = re.data
      if (re.msg == 'Executed successfully') {
        this.myChart.hideLoading()
      }
    },
      
Copy the code

4. Make echarts div height adaptive

❓ problem: If you set a dead width and height for the ECharts DOM, it will overlap if too much data is not spread out

✅ Resolve: Unset dom height to dynamically set height for echarts instance resieze method


 this.myChart = echarts.init(this.$refs.mycharts)
 this.myChart.resize({ height: this.activityName.length * 35 + 250 })/ / 👈
 / / this. ActivityName. Length is the length of the array
 //35 is the height of each activity

 varoption = {... }if (没有数据的情况) {
        this.myChart.showLoading({
          text: 'No data at present'.color: '#ffffff'.textColor: '#8a8e91'.maskColor: 'rgba(255, 255, 255, 1)'})},this.myChart.clear()
 this.myChart.setOption(option)
  
Copy the code

5. Pie – Ring graph special style writing record

The default style is that the label appears in the middle and only the data name

Fotmatter allows you to control the data to be displayed but the effect is horizontal and cannot be styled in segments

💬 sets the style with rich text segmentation and the corresponding formatter to get the desired data


          series: [{type: 'pie'.radius: ['40%'.'60%'].label: {
                show: false.position: 'center'.formatter: [
                  '{x|{c}%}'./ / x style | corresponding text
                  '{a|{b}}'    {} is required to display the desired values and data names
                ].join('\n'),  // Newline with '\n'.

                rich: {
                  a: {
                    color: 'rgba (0, 0, 0, 0.45)'.lineHeight: 14.fontSize: 14,},x: {
                    fontSize: 30.lineHeight: 30.color: '# 000000',}}},data: this.chartData,
            }
          ]
Copy the code