Echarts在线免费图表

 
            var dataGDP = [900, 500, 1632.33, 1100, 400]
var dataGrowth = [2, 2.1, 3, 2.5, 2.1]
var xAxisData =  ['2019年', '2020年', '2021年', '2022年', '2023年']
 // 最大值，用于设置背景柱体高度
let maxData = []
let maxTargeData = [...dataGDP]
let temp = maxTargeData.sort((a, b) => {
    return a - b;
})
maxTargeData.forEach(item => {
  maxData.push(temp[temp.length - 1])
})
option = {
   backgroundColor: 'rgba(0, 0, 0, 1)',
   animation: true,
   title: {
      text: '近5年GDP及增速',
      textStyle: {
         fontSize: '20px',
         color: '#fff'
      },
      left: 20,
      top: 10
   },
   tooltip: {
      // trigger: 'axis',
      axisPointer: {
      type: 'shadow'
      },
      backgroundColor: 'rgba(255,255,255,0.6)',
      borderColor: 'rgba(0, 0, 0, 0.1)',
      textStyle: {
      color: '#000'
      },
      borderWidth: 1,
      formatter: function(p) {
      const seriesName = p.seriesName
      let txtCon = ''
      seriesName === '增速' &&
         (txtCon =
            "" +
            p.seriesName +
            ":" +
            Math.floor(p.data * 100) / 100 +
            '%')

      seriesName === 'GDP' &&
         (txtCon =
            "" +
            p.seriesName +
            ":" +
            p.data +
            '亿元')
      return txtCon
      }
   },
   grid: {
      top: '20%',
      bottom: '15%',
      right: '15%'
   },
   legend: {
      show: true,
      right: 60,
      top: 20,
      itemWidth: 11,
      itemHeight: 3,
      textStyle: {
         color: '#fff'
      }
   },
   xAxis: {
      data:xAxisData,
      axisLine: {
      show: true // 隐藏X轴轴线
      },
      axisTick: {
      show: true // 隐藏X轴轴线
      },

      axisLabel: {
      show: true,
      margin: 14,
      fontSize: 18,
      textStyle: {
         color: 'rgba(255, 255, 255, 0.7)' // X轴文字颜色
      }
      }
   },
   yAxis: [
      {
      type: 'value',
      name: '(亿元)',
      nameTextStyle: {
         color: 'rgba(255,255,255,0.5)',
         fontSize: '12px'
      },
      splitNumber: 3,
      splitLine: {
         show: true,
         lineStyle: {
            color:  'rgba(255,255,255,0.2)', // 亿元分割虚线
            width: 1,
            type: 'dashed'
         }
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: false,
         lineStyle: {
            color: '#fff'
         }
      },
      axisLabel: {
         show: true,
         margin: 0,
         fontSize: 18,
         textStyle: {
           color: 'rgba(255,255,255,0.5)',
         }
      }
      // interval:Math.ceil(Math.ceil(Math.max(...[10,20,30,40])) / 5),
      // max: Math.ceil(Math.ceil(Math.max(...[10,20,30,40])) / 5) * 5,
      },
      {
      type: 'value',
      name: '(%)',
      offset: 10,
        nameTextStyle: {
         color: 'rgba(255,255,255,0.5)',
         fontSize: '12px'
      },
      splitLine: {
         show: false,
         lineStyle: {
            color: 'rgba(255,255,255,0.3)', // 增速分割曲线
            width: 1,
            type: 'dashed'
         }
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: false,
         lineStyle: {
            color: '#f00'
         }
      },
      axisLabel: {
         show: true,
         fontSize: 18,
         textStyle: {
            color: 'rgba(255,255,255,0.5)',
         },
         formatter: '{value} %'
      }
      // interval:Math.ceil(Math.ceil(Math.max(...yRate)) / 5),
      // max: Math.ceil(Math.ceil(Math.max(...yRate)) / 5) * 5,
      }
   ],
   series: [
      {
         name: 'GDP',
         type: 'bar',
         barWidth: 16,
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(67,208,255,0.2)'
                  },
                  {
                    offset: 1,
                    color: '#48E0FF'
                  }
                ])
            }
         },
         data: dataGDP,
         z: 10,
         zlevel: 0,
         label: {
            show: true,
            position: 'top',
            distance: 10,
            formatter: function (data) {
                if (data.value >=1000) {
                   return `{breakBlock|${data.value}亿}`
                  //  return `{breakBlock|${data.value}亿}`
                } 
                return `{defalutBlock|${data.value}亿}`
            },
            rich: {
                defalutBlock: {
                    color: 'rgba(255,255,255, 0.9)',
                    lineHeight: 20,
                    fontSize: '18px',
                    backgroundColor: "rgba(108, 128, 151, 0.7)",
                    padding: [5, 10, 5, 10],
                    borderRadius: 3
                },
                breakBlock: {
                    color: 'red',
                    lineHeight: 20,
                    fontSize: '18px',
                    backgroundColor: "rgba(108, 128, 151, 0.7)",
                    padding: [5, 10, 5, 10],
                    borderRadius: 3
                },
            },
         },
   		markLine: {
            symbol: "none",
            animation: false, // 动画 true,
            data: [
               {
                  silent: false, 
                  yAxis: 1000,
                  lineStyle: {
                     color: "#FA3934",
                     width: 2,
                     type: "dashed"
                   }
               }
            ],
            label: {
               show: false,
               fontSize: 24,
               position: "middle",
               fontWeight: 900
            }
         },
      },
      {
         // 柱形顶部色块
         name: '',
         type: 'pictorialBar',
         itemStyle: {
            normal: {
               color: '#48FFFF'
            }
         },
         symbolRepeat: false,
         symbolMargin: 8,
         symbol: 'rect',
         symbolClip: false,
         symbolSize: [16, 4],
         symbolPosition: 'end',
         symbolOffset: [-4, 0],
         data: dataGDP,
         width: 2,
         z: 0,
         zlevel: 1
      },
      {

        // 柱形底部色块
        name: "",
        type: "bar",
        barGap: "-145%", // 设置外框
        data: maxData,
        barWidth: 32,
        itemStyle: {
          normal: {
            color: "rgba(108, 128, 151, 0.2)", // 填充色
            // barBorderRadius: 0, //圆角半径
            label: {
              // 标签显示位置
              show: false,
              position: "top" // insideTop 或者横向的 insideLeft
            }
          }
        },
        z: 0
      },
      {
      name: '增速',
      type: 'line',
      yAxisIndex: 1,
      smooth: false, // 平滑曲线显示
      showAllSymbol: false, // 显示所有图形。
      symbolSize: 5,
      symbolColor: '#eee',
      symbol: 'circle',
      lineStyle: {
         width: 2,
         color: '#07A6FF'
      },
      itemStyle: {
         color: '#07A6FF',
         shadowColor: '#07A6FF',
         shadowBlur: 10,
         borderColor: '#07A6FF',
         borderWidth: 2
      },
      data: dataGrowth,
      z: 15,
      zlevel: 2
      }
   ]
}