echarts常用图表配置

 /**
   * 柱状图
   * */
  let barOption = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
      extraCssText: 'padding:5px 15px;background-color:rgba(5,67,203,0.4)'
    },
    grid: {
      top: 60,
      left: 70,
      right: 20,
      bottom: 40,
      containLabel: true
    },
    xAxis: {
      type: 'value',
      data: [],
      max: 600,
      axisLine: {
        lineStyle: {
          color: '#4E6392'
        }
      },
      axisLabel: {
        color: '#BCC9E1',
        margin: 15,
        fontSize: 12
      },
      axisTick: {},
      splitLine: {
        lineStyle: {
          color: 'rgba(46,53,96,0.4)'
        }
      }
    },
    yAxis: {
      type: 'category',
      name: '次',
      nameTextStyle: {
        color: '#BCC9E1',
        padding: [-10, -20]
      },
      data: ['SOS', '监控', '会议', '普通通话', '音乐广播', '文本广播', '定时广播', '实时广播'],
      axisTick: {},
      axisLabel: {
        color: '#BCC9E1',
        margin: 12,
        fontSize: 12,
        rotate: 30
      },
      axisLine: {
        lineStyle: {
          color: '#4E6392'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#4E6392'
        }
      },
      splitArea: {
        show: false
      }
    },
    series: [
      {
        type: 'bar',
        data: [300, 250, 400, 420, 480, 500, 520, 580],
        barWidth: 12,
        itemStyle: {
          normal: {
            barBorderRadius: [0, 15, 15, 0],
            color: (param) => {

              // 根据逻辑return

              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#147BE5'
              }, {
                offset: 1,
                color: '#63A6EB'
              }])
            },
            label: {
              show: true,
              position: 'inside',
              color: '#BCC9E1'
            }
          }
        },
        showBackground: true,
        backgroundStyle: {
          color: 'transparent'
        }
      }
    ]
  }

  /**
   * 折线图
   * */
  let lineOption = {
    backgroundColor: 'transparent',
    title: {
      text: '',
      textStyle: {
        color: '#9FBAE6',
        fontSize: 14
      }
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter: function(param) {
        let item = param[0]

        return item.axisValue + '<br>' + '( ' + item.data + ' )'
      },
      extraCssText: 'padding:5px 15px;background-color:rgba(5,67,203,0.4)'
    },
    axisPointer: {
      lineStyle: {
        type: 'dashed',
        color: ''
      }
    },
    grid: {
      top: '60',
      left: '60',
      right: '55',
      bottom: '45'
    },
    xAxis: {
      boundaryGap: false,
      nameTextStyle: {
        padding: [0, 0, 20, -60]
      },
      axisLine: {
        lineStyle: {
          color: '#4C5B7E'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#BCC9E1',
        margin: 15,
        fontSize: 11,
        rotate: 30
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#3D446F'
        }
      },

      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00']
    },
    yAxis: [
      {
        type: 'value',
        name: '秒',
        nameTextStyle: {
          color: '#188AFF',
          padding: [0, -30, -22, 0]
        },
        axisLabel: {
          color: '#188AFF',
          margin: 18,
          fontSize: 12
        },
        axisTick: {},
        axisLine: {
          lineStyle: {
            color: '#4C5B7E'
          }
        },
        splitLine: {
          show: false
        }
      },
      {
        type: 'value',
        name: '次',
        nameTextStyle: {
          color: '#FFBB14',
          padding: [0, 30, -22, 0]
        },
        axisLabel: {
          color: '#FFBB14',
          margin: 18,
          fontSize: 12
        },
        axisTick: {},
        axisLine: {
          lineStyle: {
            color: '#4C5B7E'
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        data: [2, 3, 12, 5, 6, 14, 26, 30, 27, 21, 29, 32, 23, 25],
        type: 'line',
        smooth: true,
        showSymbol: false,
        lineStyle: {
           2,
          color: '#188AFF'
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(24,138,255,0.1)'
            }, {
              offset: 1,
              color: 'rgba(24,138,255,0.9)'
            }])
          }
        },
        emphasis: {
          itemStyle: {
            opacity: 1,
            color: '#3594F5',
            borderColor: '#3594F5',
            shadowColor: 'rgba(53,148,245, 0.6)',
            shadowBlur: 20
          }
        }
      },
      {
        type: 'line',
        yAxisIndex: 1,
        data: [24, 18, 16, 15, 9, 20, 21, 3, 9, 10, 13, 15, 18, 14],
        smooth: true,
        showSymbol: false,
        lineStyle: {
           2,
          color: '#FFBB14'
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(255,187,20,0.1)'
            }, {
              offset: 1,
              color: 'rgba(255,187,20,0.6)'
            }])
          }
        },
        emphasis: {
          itemStyle: {
            opacity: 1,
            color: '#3594F5',
            borderColor: '#3594F5',
            shadowColor: 'rgba(53,148,245, 0.6)',
            shadowBlur: 20
          }
        }
      }
    ]
  }

  /**
   * 饼图
   * */
  let pieOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)'
    },

    visualMap: {
      show: false,
      min: 80,
      max: 600,
      inRange: {
        colorLightness: [0, 1]
      }
    },
    series: [
      {
        type: 'pie',
        radius: '55%',
        center: ['center', '52%'],
        data: [
          { value: 335, name: '正常设备' },
          { value: 250, name: '故障设备' }
        ].sort(function(a, b) {
          return a.value - b.value
        }),
        roseType: 'radius',
        label: {
          color: '#BCC9E1',
          fontSize: 13,
          formatter: '{b}
{c} ({d}%)'
        },
        labelLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          },
          smooth: 0.2
        },
        itemStyle: {
          shadowBlur: 30,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },

        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function(idx) {
          return Math.random() * 200
        }
      }
    ]
  }

  /**
   * 环形图
   * */
  let annularOption = {
    backgroundColor: 'transparent',
    // color: ['#3594F5', '#2962F4', '#84C1FF', '#14224E'],
    tooltip: {
      trigger: 'item',
      formatter: '{b}:{d}%',
      extraCssText: 'padding:5px 15px;background-color:rgba(5,67,203,0.4)'
    },
    grid: {
      top: '90',
      left: '90',
      right: '30',
      bottom: '10'
    },
    series: [
      {
        type: 'pie',
        center: ['center', '52%'],  // 饼图在容器中的位置
        radius: ['35%', '60%'],
        data: [
          { value: 250, name: '歌手分类' },
          { value: 300, name: '地区分类' }
        ],
        label: {
          fontSize: 13,
          position: 'inside',
          formatter: '{b}
{c} ({d}%)'
        },
        itemStyle: {
          shadowColor: 'rgba(24,31,67,0.6)',
          shadowBlur: 20
        }
      }
    ]
  }

  /**
   * 水球图
   * */
  let waterPoloOption = {
    title: {
      text: (0.6 * 100).toFixed(0) + '{a|%}',
      textStyle: {
        fontSize: 24,
        fontFamily: 'Microsoft Yahei',
        fontWeight: 'normal',
        color: '#bcb8fb',
        rich: {
          a: {
            fontSize: 10
          }
        }
      },
      x: 'center',
      y: '35%',
      subtext: '在线设备数：1852',
      subtextStyle: {
        color: '#bcb8fb',
        fontSize: 14,
        fontWeight: 700
      }
    },

    // 数据
    series: [
      {
        type: 'liquidFill',
        radius: '60%',
        center: ['50%', '50%'],
        data: [0.6, 0.6, 0.6, 0.5],
        backgroundStyle: {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [{
              offset: 0,
              color: 'rgba(255, 255, 0, 0)' // 0% 处的颜色
            }, {
              offset: 0.5,
              color: 'rgba(255, 255, 0, 0)' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#00ffff8c' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          }
        },
        outline: {
          borderDistance: 2,
          itemStyle: {
            borderWidth: 0,
            borderColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(69, 73, 240, 0)'
              }, {
                offset: 1,
                color: 'rgba(69, 73, 240, 1)'
              }]
              // globalCoord: false
            },
            shadowBlur: 30,
            shadowColor: 'red'
          }
        },
        label: {
          formatter: function() {
            return ''
          }
        }
      }]
  }