柱状图，中间向两边延申

这样子的

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {  ||提示框
    trigger: 'axis', ||轴触发，axis鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据
    axisPointer: {   ||坐标轴指示器，坐标轴触发有效
      type: 'shadow' ||默认为line，line直线，cross十字准星，shadow阴影
    }
  },
  legend: {   ||图例
    data: ['Expenses', 'Income']
  },
  grid: {   ||绘图网格
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true, ||grid 区域是否包含坐标轴的刻度标签。
    show: false ||是否显示边框线
  },
  xAxis: [
    {
      type: 'value', ||对应series
      axisLine: {
        show: true ||是否显示坐标轴线
      },
      splitLine: {
        show: false ||是否显示网格线
      }
    }
  ],
  yAxis: [
    {
      type: 'category',
      axisTick: {    ||坐标轴刻度相关设置。
        show: false ||是否显示坐标轴刻度线
      },
      splitLine: {
        show: false ||是否显示网格线
      },
      axisLine: {
        show: true ||是否显示坐标轴线
      },
      axisLabel: {
        show: true ||是否显示坐标轴上的文字
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  series: [
    {
      name: 'Income', ||对应的图例
      type: 'bar',    ||柱状图
      stack: 'Total', ||堆叠，起点从上一个数据开始算
      label: {        ||图形上的文本标签
        show: true
      },
      emphasis: {     ||高亮的图形样式和标签样式
        focus: 'series' ||高亮图形时，是否淡出其它数据'series'聚焦当前高亮的数据所在的系列的所有图形。
      },
      data: [320, 302, 341, 374, 390, 450, 420]
    },
    {
      name: 'Expenses',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'inside' ||默认值，最中央
      },
      emphasis: {
        focus: 'series'
      },
      data: [-120, -132, -101, -134, -190, -230, -210]
    }
  ]
};

option && myChart.setOption(option);