Echarts在线免费图表

 
            const xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const seriesData = [1, 10, 400, 390, 200, 100, 390];
const maxData = seriesData.reduce((v1, v2) => {
   if (v1 < v2) {
      return v2;
   }
   return v1 || 0;
});
// 利用画布拉开柱子的上下间距
option = {
   tooltip: { show: false },
   legend: { show: false },
   grid: [
      {
         left: '35', // 比第二个grid多5像素
         right: '35',// 比第二个grid多5像素
         bottom:50,
         top: 50,
         containLabel: true,
      },
      {
         left: '30',
         right: '30',
         bottom:50,
         top: 50,
         containLabel: true,
      }],
   xAxis: [
      {
         type: 'value',
         gridIndex: 0,
         max: maxData,
         show: false,
      },
      {
         type: 'value',
         max: maxData,
         gridIndex: 1,
         show: false,
      },
   ],
   yAxis: [
      {
         axisLine: { show: false },
         axisTick: { show: false },
         splitLine: { show: false },
         type: 'category',
         gridIndex: 0,
      },
      {
         type: 'category',
         gridIndex: 1,
         show: false,
      }
   ],
   series: [
      {
         name: 'Direct',
         barWidth: 10,
         yAxisIndex: 0,
         xAxisIndex: 0,
         type: 'bar',
         data: seriesData,
         itemStyle: { color: 'blue' },
         showBackground: true,
         backgroundStyle: {
            color: '#ddd',
         },
         // 注意z值
         z: 3,
      },
      {
         name: 'Bg',
         barWidth: 20,
         yAxisIndex: 1,
         xAxisIndex: 1,
         type: 'bar',
         itemStyle: {
            normal: {
               borderColor: '#4DCEF8',
               borderWidth: 1,
               color: 'rgba(102, 102, 102,0)'
            },
         },
         animation: false,
         data: new Array(seriesData.length).fill(maxData)
         // showBackground:true,
      },
   ]
};