echarts折现混合柱状图

echarts yekong

wanjunshijiecom 2021-08-31 at 07.08.10@2x

    drawLine () {
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      let numColor = 'rgba(40, 224, 254, 1)'
      let circleColor = 'rgba(168,200,255,1)'
      let centerCircleColr = '#fff'
      let list = [
        {
          TIME: '2015',
          COUNT: 203,
        },
        {
          TIME: '2016',
          COUNT: 298,
        },
        {
          TIME: '2017',
          COUNT: 586,
        },
        {
          TIME: '2018',
          COUNT: 622,
        },
        {
          TIME: '2019',
          COUNT: 225,
        },
        {
          TIME: '2020',
          COUNT: 239,
        },
        {
          TIME: '2021',
          COUNT: 139,
        },
      ]
      let xAxisData = []
      let seriesData = []
      let maxList = []
      list.map((item, index) => {
        xAxisData.push(item.TIME)
        seriesData.push(item.COUNT)
      })
      let max = Math.max(...seriesData) + 5
      list.map((item, index) => {
        maxList.push(max)
      })
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(0, 255, 233,0)',
                },
                  {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)',
                  },
                ],
                global: false,
              },
            },
          },
        },
        grid: {
          top: 20,
          left: '12%',
          right: '5%',
          bottom: '15%',
        },
        xAxis: {
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: 'rgba(16,85,120,1)',
              width: '2',
            },
          },
          axisTick: {
            alignWithLabel: true,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#ccc',
            },
          },
          axisLabel: {
            // rotate: 30,
            textStyle: {
              fontWeight: '500',
              color: 'rgba(152, 191, 251, 1)',
              fontSize: '12px',
            },
          },
        },
        yAxis: {
          nameTextStyle: {
            color: 'rgba(53,107,144,1)',
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(86,122,147,0.08)',
            },
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: 'rgba(16,85,120,1)',
            },
          },
          axisLine: {
            show: false,
            lineStyle: {},
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(152, 191, 251, 1)',
              fontSize: '13px',
            },
          },
        },
        series: [{
          type: 'bar',
          z: 1,
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(43, 160, 255, 0)',
                },
                  {
                    offset: 1,
                    color: '#0f2a5f',
                  },
                ],
                globalCoord: false,
              },
            },
          },
          barWidth: 14,
          barGap: 10,
          data: maxList,
        },
          {
            data: seriesData,
            type: 'line',
            symbol: 'circle', //设定为实心点
            symbolSize: 10, //圆点大小
            smooth: true,
            showSymbol: true,
            hoverAnimation: true,
            animation: true,
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'rgba(40, 224, 253, 1)',
                fontSize: 12,
              },
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [{
                  offset: 0,
                  color: centerCircleColr,
                },
                  {
                    offset: 0.2,
                    color: centerCircleColr,
                  },
                  {
                    offset: 0.21,
                    color: '#27d1f1',
                  },
                  {
                    offset: 1,
                    color: '#fff',
                  },
                ]), //圆点颜色
                borderColor: circleColor,
                borderWidth: 2,
                lineStyle: {
                  //折线颜色大小
                  type: 'solid', //'dotted'虚线 'solid'实线
                  color: numColor,
                  width: 1,
                  borderColor: 'transparent', //拐点边框颜色
                },
              },
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#175b86'
                  },
                  {
                    offset: 1,
                    color: '#0d1d4d'
                  }
                ], false),
              }
            },
          },
        ],
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢