echarts 多系列柱状图

title标题

title：{ 
   text:'标题',//图表标题
   show:true, //true 显示标题; false 不显示标题;默认显示标题为true
   
   //标题文字样式
   textStyle:{
       color：,//字体颜色
       fontStyle:,//主标题文字字体的风格 normal italic oblique
       fontWeight:,//主标题文字字体的粗细
       fontFamily:,//主标题文字的字体系列
       fontSize:,//主标题文字的字体大小
       align:,//文字水平对齐方式，默认自动
       verticalAlign:,//文字垂直对齐方式，默认自动
       lineHeight:,//行高。
   }
   backgroundColor：,//背景色，默认透明
   borderColor:,//边框颜色
}

legend 图例组件

legend: {
        type：,//图例的类型,'plain'：普通图例。缺省就是普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
        data: [{
            name: '系列1',  // 强制设置图形为圆。
            icon: 'circle', // 设置文本为红色
            textStyle: {
                color: 'red'
            }
        }]
        left:,//图例组件离容器左侧的距离
        right:,//图例组件离容器右侧的距离。
        top:,//图例组件离容器上侧的距离。
        bottom:,//图例组件离容器下侧的距离。
        align:,//图例标记和文本的对齐。
      },

tooltip提示框组件

tooltip: {
    show:true,//是否显示提示框组件，包括提示框浮层和 axisPointer。
    trigger:,//触发类型。可选：'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none'什么都不触发。
    axisPointer:{
        type:,//指示器类型。'line' 直线指示器,'shadow' 阴影指示器,'none'无指示器',cross'十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
        axis:,//指示器的坐标轴
    }
},

toolbox 工具栏。

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

toolbox: {
    show: true,//是否显示工具栏组件
    //各工具配置项。
    feature: {
        mark: { show: false },//保存的图片格式。支持 'png' 和 'jpeg'。
        //保存为图片。
        saveAsImage: { 
          show: true, //是否显示该工具。
          title: '保存为图片',// title
          type: 'png', //保存的图片格式。支持 'png' 和 'jpeg'。
        }
    }
},

xAxis x轴坐标系

   xAxis: [
        {
          show：true,//是否显示 x 轴。默认为true
          type: ,//坐标轴类型。
          //可选：'value' 数值轴，适用于连续数据。
          //'category'类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
          //time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据。
          
          //坐标轴轴线相关设置。
          axisLine: {
            show: false //是否显示坐标轴轴线
          },
          boundaryGap: ,//类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
          
          //坐标轴在 grid 区域中的分隔线。
          splitLine: {
            show: true,//是否显示分隔线。默认数值轴显示，类目轴不显示。
            interval:0,//坐标轴分隔线的显示间隔，在类目轴中有效。可以设置成 0 强制显示所有标签。
            
            lineStyle: {
                color: [], //分隔线颜色，可以设置成单个颜色也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。
                width: 1,//分隔线线宽。
                type: 'dashed'  //分隔线线的类型。可选：'solid' 'dashed' 'dotted'
            }
          },
          
          //x轴指示器
          axisPointer: {
            show: true, //默认不显示为false
            type: 'line', //指示器类型。line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器
            
           
            lineStyle: { 
                color:, //线的颜色
                type:,//线的类型。
                width://线的宽度。
            },
          },
          
          //坐标轴刻度标签的相关设置。
          axisLabel:{
            show:,//是否显示刻度标签。
            padding:,//文字块的内边距
          },
          data: 数据
        }
      ],

写成函数，方便代码复用

  /**
   * 
   * @param data 数据列
   * @param lendname 题注系列字段名
   * @param xAxisname x轴显示的字段名
   * @param cnt 展示的数据字段
   * @param title 图表标题
   */
   bar(data: Array<any>, lendname: string, xAxisname: string, cnt: string, title: string) {
    let SeriesList = [];
    //多系列题注
    let ydata = Array.from(new Set(data.map((item) => item[lendname])));
    //x轴显示的类目
    let xdata = Array.from(new Set(data.map((item) => item[xAxisname])));
    //系列颜色
    let color = ['#FF6384', '#36A2EB', '#FFCE56', '#4dbd74', '#17a2b8', '#ffc107', '#f86c6b', '#63c2de', '#20c997', '#f8cb00', '#e83e8c', '#6f42c1', '#DA70D6', '#6610f2', '#FF8C00'];
    let j = 0;
    //list数据处理
    ydata.forEach(temp => {
      let tempData = [];
      xdata.forEach(x => {
        let curretData;
        data.forEach(item => {
          if (item[xAxisname] == x && item[lendname] == temp) {
            curretData = item[cnt];
          }
        })
        if (curretData > 0) {
          tempData.push(curretData);
        } else {
          tempData.push(0);
        }
      })
      SeriesList.push({
        name: temp,
        type: 'bar',
        data: tempData,
        itemStyle: {
          color: color[j++],
        },
        label: {
          normal: {
            show: true,
            position: 'top'
          }
        },
        barWidth: xdata.length <= 10 ? 15 : {} //控制柱体的宽度
      })
    })
    //图形配置
    let options = {
      title: {
        text: title,
      },
      legend: {
        data: ydata,
        align: 'left'
      },
      tooltip: {},
      xAxis: {
        data: xdata,
        silent: false,
        boundaryGap: true,
        splitLine: {
          show: false
        },
        axisTick: {
          alignWithLabel: true,
          length: 3
        }
      },
      yAxis: {},
      series: SeriesList,
    };
    return options
  }