Echarts在线免费图表

 
            const xData = ['02月', '01月']
const yData = [1899, 1922]
const dataColor = {
   '01月':new echarts.graphic.LinearGradient(1, 0, 0, 0, [
               {
                  offset: 0,
                  color: '#00ffcc'
               },
               {
                  offset: 1,
                  color: '#006fa3'
               }
               ]),
   '02月':new echarts.graphic.LinearGradient(1, 0, 0, 0, [
               {
                  offset: 0,
                  color: '#ff8f3e'
               },
               {
                  offset: 1,
                  color: '#880000'
               }
               ])
}
const legendData = {
   企业数量: 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: {
         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
      },
   yAxis: {
      data: xData,
      axisLine: {
         show: false // 隐藏X轴轴线
      },
      axisTick: {
         show: false // 隐藏X轴轴线
      },

      axisLabel: {
         show: true,
         margin: 14,
         fontSize: 12,
         textStyle: {
            color: '#758396' // X轴文字颜色
         }
      }
   },
   series: [
      {
         name: nameData[0],
         type: 'bar',
         barWidth: 20,
         itemStyle: {
            normal: {
               color: function(p){
                  return dataColor[p.name]
               }
            }
         },
         showBackground: true,
         backgroundStyle: {
            color: 'transparent',
            borderColor: '#093531',
            borderWidth: 3
         },
         data: yData,
         z: 10,
         zlevel: 0
      },
      {
         // 分隔
         name: nameData[0],
         type: 'pictorialBar',
         itemStyle: {
            normal: {
               color: '#fff'
            }
         },
         symbolRepeat: 'fixed',
         symbolMargin: 26,
         symbol: 'rect',
         symbolClip: true,
         symbolSize: [3, 20],
         symbolPosition: 'start',
         symbolOffset: [0.2, 0],
         data: yData,
         width: 2,
         z: 0,
         zlevel: 1
      },
   ]
}