echarts开发中常用属性记录

一.  宽高自适应

目录

一.  宽高自适应

二.  tooltip相关属性

三.  饼图线条指示-自定义颜色等

---

---

  场景：在页面通过F11等大小切换的时候，echarts图形可能未及时适应屏幕的大小。

<template>
  <div ref="myEcharts" />
</template>

const options = {
     ···   
}

//  写在options 之外即可
const chart = echarts.init(this.$refs.myEcharts)    //初始化获取对应节点
      chart.setOption(options)

      window.addEventListener('resize', function() {    //实现自适应
        chart.resize()
      })

二.  tooltip相关属性

tooltip: {
    trigger: 'axis',    item(单个) || axis(整块) || none
    axisPointer: {
        type: 'shadow',    line(直线) || shadow(阴影) || cross(十字准星) || none
        label: {
            show: true // 鼠标移入X轴文字效果 true || false
         }
       }
     }

三.  饼图线条指示-自定义颜色等

        series: [
          {
            name: '结案方式分布',
            type: 'pie',
            radius: ['40%', '50%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              color: function(params) {
                const colors = [
                  new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                    { offset: 0, color: '#FDBE38' },
                    { offset: 1, color: '#FDBE38' }
                  ]),
                  new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                    { offset: 0, color: '#45DB66' },
                    { offset: 1, color: '#45DB66' }
                  ]),
                  new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                    { offset: 0, color: '#6D74FF' },
                    { offset: 1, color: '#6D74FF' }
                  ]),
                  new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                    { offset: 0, color: '#1DA4FF' },
                    { offset: 1, color: '#1DA4FF' }
                  ]),
                  new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                    { offset: 0, color: '#FC6323' },
                    { offset: 1, color: '#FC6323' }
                  ]),
                  new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                    { offset: 0, color: '#E3589B' },
                    { offset: 1, color: '#E3589B' }
                  ])
                ]
                return colors[params.dataIndex]
              }
            },
            animationEasing: 'cubicInOut',
            animationDuration: 2000,
            label: {  // 线条指示
              show: true,
              normal: {
                show: true,
                color: '#fff',
                formatter: function(params) {
                  if (params.componentType === 'series') {
                    return params.data.ratio
                  }
                }
              }
              // color: '#fff',
              // position: 'inner',
              // formatter: '{d}%'
            },
            labelLine: { // 线条指示的长度
              show: true,
              length: 50
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: data
          }
        ]

总结：series-label-normal属性：

serios: [
    {
        
            label: {
              show: true, 
              normal: {
                show: true,  // 线条显示
                color: '#fff',
                formatter: function(params) {
                  if (params.componentType === 'series') {
                    return params.data.ratio
                  }
                }
              }
            },
            labelLine: {
              show: true,
              length: 50 // 线条长度
            },

    }
]

 

echarts官网·详细配置项