Echarts在线免费图表

 
            const xData = ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
const yData = [1899, 1922, 1949, 1969, 1989, 1999, 1999, 2001, 2010, 2020, 2023, 2025]
const yRate = [0.52, 0.31, 1.22, 1.04, 0.539, 0.87, 0.45, 0.53, 0.74, 0.71, 0.33, 0.33]

const legendData = {
   企业数量: true,
   增长速率: true
}
const nameData = Object.keys(legendData)

option = {
   // backgroundColor: '#fff',
   // animation: true,
   tooltip: {
      backgroundColor: '#fff',
      borderColor: 'rgba(75, 253, 238, 0.4)',
      textStyle: {
      color: '#333'
      },
      borderWidth: 0,
      formatter: (p) => {
      const seriesName = p.seriesName
      let txtCon = ''
      seriesName === nameData[1] && (txtCon =
      `<div>
         <div>${p.name}</div>
         <div>
            ${p.marker}
               <span>${p.seriesName}：${p.value} %</span>
         </div>
      </div>`)

      seriesName === nameData[0] && (txtCon =
      `<div>
         <div>${p.name}</div>
         <div>
            ${p.marker}
               <span>${p.seriesName}：${p.value} (家)</span>
         </div>
      </div>`)
      return txtCon
      }
   },
   grid: {
      top: '15%',
      bottom: '15%',
      right: '7%'
   },
   legend: {
      show: true,
      // selectedMode:false
      selected: legendData,
      top: '5%'
   },
   xAxis: {
      data: xData,
      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(...yData)) / 5),
         max: Math.ceil(Math.ceil(Math.max(...yData)) / 5) * 5
      },
      {
         type: 'value',
         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'
            },
            formatter: '{value} %'
         },
         interval: Math.ceil(Math.ceil(Math.max(...yRate) - (Math.min(...yRate) > 0 ? '0' : Math.min(...yRate))) / 5),
         max: Math.ceil(Math.ceil(Math.max(...yRate)) / 5) * 5
      }
   ],
   series: [
      {
         name: nameData[0],
         type: 'bar',
         barWidth: 26,
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                  offset: 0,
                  color: 'rgba(24,144,255,1)'
               },
               {
                  offset: 1,
                  color: 'rgba(24,144,255,0)'
               }
               ])
            }
         },
         data: yData,
         z: 10,
         zlevel: 0
      },
      {
         // 分隔
         name: nameData[0],
         type: 'pictorialBar',
         itemStyle: {
            normal: {
               color: '#fff'
            }
         },
         symbolRepeat: 'fixed',
         symbolMargin: 6,
         symbol: 'rect',
         symbolClip: true,
         symbolSize: [26, 4],
         symbolPosition: 'start',
         symbolOffset: [0.2, 5],
         data: yData,
         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: nameData[1],
         type: 'line',
         yAxisIndex: 1,
         smooth: false, // 平滑曲线显示
         showAllSymbol: false, // 显示所有图形。
         symbolSize: 5,
         symbolColor: '#eee',
         symbol: 'circle',
         lineStyle: {
            width: 3,
            color: '#DA3535'
         },
         itemStyle: {
            color: '#DA3535',
            shadowColor: '#DA3535',
            shadowBlur: 10,
            borderColor: '#DA3535',
            borderWidth: 2
         },
         data: yRate,
         z: 15,
         zlevel: 2
      }
   ]
}