面积图echarts 柱状配置项内容和展示

曲线渐变色

      option = {
          'tooltip': {
            trigger: 'axis',
            formatter: '{b}<br />活跃客户数:{c1}家',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          'legend': {
            show: false
          },
          'grid': {
            left: '0',
            right: '0',
            top: '15%',
            bottom: '0',
            containLabel: true
          },
          'xAxis': [{
            type: 'category',
            boundaryGap: true,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: ['#32495b']
              }
            },
            axisLabel: {
              interval: 0,
              color: '#9eb5be',
              fontSize: 14
            },
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          }],
          'yAxis': [{
            name: '人数(家)',
            nameTextStyle: {
              color: '#5182a1',
              fontSize: 14
            },
            type: 'value',
            axisLabel: {
              color: '#5182a1',
              fontSize: 14
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#32495b']
              }
            }
          }],
          'series': [
            { // For shadow
              type: 'bar',
              itemStyle: {
                normal: {color: 'rgba(0,0,0,0.05)'}
              },
              barGap: '-100%',
              barCategoryGap: '0',
              data: [
                {
                  'name': '201701',
                  'value': 5000
                },
                {
                  'name': '201702',
                  'value': 5000
                },
                {
                  'name': '201703',
                  'value': 5000
                },
                {
                  'name': '201704',
                  'value': 5000
                },
                {
                  'name': '201705',
                  'value': 5000
                },
                {
                  'name': '201706',
                  'value': 5000
                },
                {
                  'name': '201707',
                  'value': 5000
                },
                {
                  'name': '201708',
                  'value': 5000
                },
                {
                  'name': '201709',
                  'value': 5000
                },
                {
                  'name': '2017010',
                  'value': 5000
                },
                {
                  'name': '2017011',
                  'value': 5000
                },
                {
                  'name': '2017012',
                  'value': 5000
                }
              ],
              animation: false
            },
            {
              name: '活跃客户数',
              type: 'line',
              smooth: true,
              stack: '总量',
              symbolSize: 10,
              showSymbol: true,
              label: {
                normal: {
                  show: true,
                  position: 'bottom',
                  color: '#fff',
                  fontSize: 14
                }
              },
              lineStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: '#409eff'
                    }, {
                      offset: 1,
                      color: '#15e198'
                    }]
                  },
                  shadowColor: 'rgba(0, 0, 0, 0.6)',
                  shadowOffsetY: 4,
                  shadowBlur: 10,
                  width: 4
                }
              },
              markPoint: {
                symbol: 'roundRect', // pin
                symbolSize: [50, 35],
                symbolOffset: [0, '-80%'],
                label: {
                  normal: {
                    fontSize: 14
                  }
                },
                data: [{
                  'type': 'max',
                  'name': '最大值',
                  'label': {
                    'normal': {
                      'color': '#0e1425'
                    }
                  },
                  'itemStyle': {
                      'normal': {
                        'color': '#f0dc74'
                      }
                    }
                  }, {
                    'type': 'min',
                    'name': '最小值',
                    'itemStyle': {
                        'normal': {
                          'color': '#1265b1'
                        }
                      }
                  }]
              },
              areaStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0.4,
                      color: '#1370c6'
                    }, {
                      offset: 1,
                      color: 'rgba(19, 112, 198, 0)'
                    }]
                  }
                }
              },
              data: [820, 888, 567, 788, 467, 435, 879, 435, 657, 456, 564, 345]
            }]
        }