Echarts笔记

1.显示轴线

xAxis: {
  axisLine: { // 显示轴线
    show: true,
    onZero: false,
    lineStyle: {
      color: '#ffffff'
    }
  },
},

2.点击legend

legendClick(myChart, legendData)
option && myChart.setOption(option, true)

    legendClick(chart, legendData) {
      chart.off('legendselectchanged')
      // 定义当前点击的标签
      let legendWai = ''
      chart.on('legendselectchanged', function(obj) {
        legendWai = obj.name
        for (let i = 0; i < legendData.length; i++) {
          // 显示当前legend 关闭非当前legent
          if (legendWai == legendData[i]) {
            chart.dispatchAction({
              type: 'legendSelect',
              name: legendData[i]
            })
          } else {
            chart.dispatchAction({
              type: 'legendUnSelect',
              name: legendData[i]
            })
          }
        }
      })
    }

3.个别数据进行个性化定义

series:{
  data:[
    12,
    34,
    {
      value：56,
      label:{},
      itemStyle:{....}
    }
  ]
}

4.线图点颜色自定义

 series: [
   {
      name: 'BMI',
      type: 'line',
      itemStyle: {
          normal: {
            color: function(params) {
              return params.data.color
            },
            lineStyle: {
              color: 'pink'
            }
          }
       },
       emphasis: {
          focus: 'series'
       },
       data: seriesData
   }
]

5.标题富文本形式

title: {
   text: '行为表现得分情况 {small|（a得分 b班级平均分 c年级平均分）}',
   x: 'left',
   textStyle: {
       color: '#000',
       fontWeight: 'normal',
       fontSize: 18,
       lineHeight: '30',
       rich: {
           small: {
              fontSize: 14,
              fontWeight: 'normal',
              color: '#666'
            }
      }
   },
},

6.选择性点亮legend

 legend: {
            data: ['波长', '物理量'],
            selected: {
                '物理量': true,
                '波长': false
            }
        },

7.雷达图被遮挡

radar: {
    indicator：indicator,
    radius:85, // 缩放
}

8.饼图label线的位置和长度设置

label: {
   formatter: '{b}：{c}%',
   fontSize: 12,
   padding: [0, -100, 20, -100],
},
labelLayout: function(params) {
   let points = params.labelLinePoints
   let isLeft = params.labelRect.x < myChart.getWidth() / 2
   points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
   return {
     labelLinePoints: points,
   }
}

9.饼图label线的位置和长度设置

echarts地图json文件生成地址：https://datav.aliyun.com/portal/school/atlas/area_selector