Echarts在线免费图表

 
            let xData = ['左转','直行','右转','左转','直行','右转','左转','直行','右转','左转','直行','右转']
let branchNames = ['北分支','东分支','南分支','西分支']
option = {
   color: ['#b3b3b3', '#65bbff', '#33a265'],
   legend: {
      x: 'right',
      itemGap: 16,
      itemWidth: 16,
      itemHeight: 3,
      data: [
         {
            name: '历史交通流量',
            icon: 'roundRect',
            textStyle: {
               color: '#b3b3b3',
            }
         },
         {
            name: '原通行能力',
            icon: 'roundRect',
            textStyle: {
               color: '#65bbff',
            }
         },
         {
            name: '优化通行能力',
            icon: 'roundRect',
            textStyle: {
               color: '#33a265',
            }
         },
      ]
   },
   grid: {
      left: 35,
      top: 40,
      right: 20,
      bottom: 90,
   },
   tooltip: {
      trigger: 'item',
      formatter: function (params) {
         return (params.name + '：' + params.value)
      }
   },
   xAxis: {
      type: 'category',
      data: xData,
      axisLine: {
         lineStyle: {
            color: this.isDark ? '#57617B' : '#AFAFAF',
         }
      },
      axisTick: {
         show: false,
      },
      axisLabel: {
         interval: 0,
         formatter: function (value, index) {
            if (value == '直行') {
               return value + '\n\n' + branchNames[(index - 1) / 3]
            } else {
               return value;
            }
         }
      }
   },
   yAxis: {
      type: 'value',
      splitLine: {
         show: false,
      },
      axisLabel: {
         color: 'rgba(255, 255, 255, .5)',
         fontSize: 10
      },
      axisLine: {
         lineStyle: {
            color: this.isDark ? '#57617B' : '#AFAFAF',
         }
      },
   },
   series: [
      {
         name: '历史交通流量',
         type: "bar",
         barWidth: "6",
         data: [100,200,300,124,235,457,869,720,230,475,653,548]
      },
      {
         name: '原通行能力',
         type: "bar",
         barWidth: "6",
         data: [300,720,230,124,235,475,653,100,200,548,457,869,]
      },
      {
         name: '优化通行能力',
         type: "bar",
         barWidth: "6",
         data: [124,230,475,235,457,869,,653,548,100,720,200,300,]
      }
   ]
}