echarts（二）

• 报表周围有很多的空白

参考 Echarts 配置项属性：grid,（附上地址：https://echarts.baidu.com/option.html#grid）

注：grid可以在网格上绘制折线图，柱状图，散点图（气泡图），所以只对这些有用

let option = {
        grid: {
          top: 0,
          bottom: 0,
          left: 15,
          right: 15,
          containLabel: true
        }
}

饼图：

通过修改radius和中心点的位置来控制（https://echarts.baidu.com/option.html#series-pie.radius）

• 根据数据判断动态返回颜色

 itemStyle: {
              normal: {
                color: function (params) {
                  let color = ['#dd5461', '#49aa53']
                  let index = params.dataIndex
                  if (endTimePlan[index].getTime() < endTime[index].getTime()) {
                    return color[0]
                  } else {
                    return color[1]
                  }
                }
              }
            },

• 自定义tooltip的样式：返回的是html

 tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff',
          textStyle: {
            color: '#000'
          },
          axisPointer: {
            type: 'shadow'
          },
          formatter(params) {
            let text = '<span style="border-bottom: 2px solid #5471DB;font-size:16px;">环比</span><br/>'
            params.forEach(item => {
              const yData = dataT[item.axisValue][item.seriesName]
              text += `<span style="display:inline-block;padding-right:20px">${item.seriesName}</span>
                       <span style="color: ${1 / parseInt(yData) > 0 ? 'red' : 'green'}">${yData}</span>
                       <br/>`
            })
            return text
          }
     }

• 柱状图根据label的值动态更改颜色

以下代码实现的效果：如果增长率为正数，则以红色显示，否则以绿色显示

 

series: [{
          data: data,
          type: 'bar',
          label: {
            show: true,
            position: 'top',
            formatter(params) {
              const seriesData = increase[params.name]
              if (1 / parseInt(seriesData) > 0) {
                return `{red|${seriesData}}`
              } else {
                return `{green|${seriesData}}`
              }
            },
            rich: {
              red: {
                color: 'red'
              },
              green: {
                color: 'green'
              }
            }
          }