Echarts在线免费图表

 
            option = {
   backgroundColor: '#000',
   animation: true,
   tooltip: {
      // trigger: 'axis',
      axisPointer: {
      type: 'shadow'
      },
      backgroundColor: '#fff',
      borderColor: 'rgba(75, 253, 238, 0.4)',
      textStyle: {
      color: '#333'
      },
      borderWidth: 1,
      formatter: function(p) {
      const seriesName = p.seriesName
      let txtCon = ''
      seriesName === '增长速率' &&
         (txtCon =
            "" +
            p.seriesName +
            ":" +
            Math.floor(p.data * 100) / 100 +
            '%')

      seriesName === '企业数量（家）' &&
         (txtCon =
            "" +
            p.seriesName +
            ":" +
            p.data +
            '家')
      return txtCon
      }
   },
   grid: {
      top: '15%',
      bottom: '15%',
      right: '15%'
   },
   legend: {
      show: true,
      left: 'center',
      top: 20,
      itemWidth: 11,
      itemHeight: 3
   },
   xAxis: {
      data: ['2018年', '2019年', '2020年', '2021年', '2022年'],
      axisLine: {
      show: false // 隐藏X轴轴线
      },
      axisTick: {
      show: false // 隐藏X轴轴线
      },

      axisLabel: {
      show: true,
      margin: 14,
      fontSize: 12,
      textStyle: {
         color: '#758396' // X轴文字颜色
      }
      }
   },
   yAxis: [
      {
      type: 'value',
      // name: '单位:(家)',
      nameTextStyle: {
         color: '#758396',
         fontSize: 12,
         padding: 10
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: 'rgba(52,78,130,0.2)',
            width: 1,
            type: 'dashed'
         }
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: 'rgba(52,78,130,0.2)'
         }
      },
      axisLabel: {
         show: true,
         margin: 14,
         fontSize: 12,
         textStyle: {
            color: '#758396'
         }
      }
      // 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',
      splitLine: {
         show: false,
         lineStyle: {
            color: 'rgba(52,78,130,0.2)',
            width: 1,
            type: 'dashed'
         }
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: false,
         lineStyle: {
            color: 'rgba(52,78,130,0.2)'
         }
      },
      axisLabel: {
         show: true,
         margin: 14,
         fontSize: 12,
         textStyle: {
            color: '#758396'
         },
         formatter: '{value} %'
      }
      // interval:Math.ceil(Math.ceil(Math.max(...yRate)) / 5),
      // max: Math.ceil(Math.ceil(Math.max(...yRate)) / 5) * 5,
      }
   ],
   series: [
      {
         name: '企业数量（家）',
         type: 'bar',
         barWidth: 26,
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(142,194,31,0.6)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(142,194,31,0.06)'
                  }
                ])
            }
         },
         data: [800, 500, 900, 600, 400],
         z: 10,
         zlevel: 0
      },
      // {
      //    // 分隔
      //    name: '企业数量（家）',
      //    type: 'pictorialBar',
      //    itemStyle: {
      //       normal: {
      //          color: '#fff'
      //       }
      //    },
      //    symbolRepeat: 'fixed',
      //    symbolMargin: 6,
      //    symbol: 'rect',
      //    symbolClip: true,
      //    symbolSize: [26, 4],
      //    symbolPosition: 'start',
      //    symbolOffset: [0.2, 5],
      //    data: [10, 20, 30, 40, 50],
      //    width: 2,
      //    z: 0,
      //    zlevel: 1
      // },

      // {
      //   name: "",
      //   type: "bar",
      //   barGap: "-110%", // 设置外框粗细
      //   data: [100, 100, 100, 100, 100, 100, 100],
      //   barWidth: 16,
      //   itemStyle: {
      //     normal: {
      //       color: "transparent", // 填充色
      //       // 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: '#FD8D26'
      },
      itemStyle: {
         color: '#FD8D26',
         shadowColor: '#FD8D26',
         shadowBlur: 10,
         borderColor: '#FD8D26',
         borderWidth: 2
      },
      data: [2, 2.1, 3, 2.5, 2.1],
      z: 15,
      zlevel: 2
      }
   ]
}