carInsightSystem_wxapp/components/option/sColumnarOption.js

// 多条柱状
export default function sHistogram(dx = [], ds = [], data = [], color2 = [],barWidth=24) {
  // MS判断多条数据还是单条数据   true为单条false为多条
  return {
    tooltip: {
        trigger: "axis",
        backgroundColor: "#08182F",
        color: "#fff",
        borderColor: "#3373CC",
        padding:[0,5],
        renderMode:'richText',
        textStyle: {
            color: "#fff", //设置文字颜色
            fontSize: 8
        },
        extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
        confine: true
    },
    legend: {
      icon: 'rectangle', //data图标样式
      itemWidth: 9, //data图标大小
      itemHeight: 9,
      left: 10,
      textStyle: {
        fontSize: 7,
        fontWeight: 400
      },
      data: data,
    },
    //图表位置
    grid: {
      left: 7,
      right: 7,
      bottom: 15,
      top: 45,
      containLabel: true
    },
    dataZoom: [{ //添加X轴滚动条
      type: 'inside',
      show: false,
      start: 50,
      end: 10,
      handleSize: 5
    }],
    yAxis: [{
      type: 'value',
      axisTick: {
        show: false //去除刻度线
      },
      axisLine: {
        show: false //去除轴线
      },
      axisLabel: {
        color: '#999999', //y轴文本颜色
        textStyle: {
          fontSize: 8
        },
        formatter: (value) => {
          if (value >= 10000) {
            value = (value / 10000) + '万';
          }
          return value;
        }
      },
      splitLine: { //分割线
        // lineStyle:{
        //     // color:"#2d3436"

        // }
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#E8E8E8',
        }
      }
    }],
    xAxis: [{
      type: 'category',
      data: dx,
      axisTick: {
        show: false //去除刻度线
      },
      axisLine: {
        show: false, //去除轴线
      },
      axisLabel: {
        color: '#999999', //x轴文本颜色
        textStyle: {
          fontSize: 6
        }

      }
    }],
    series: columar(data, ds, color2,barWidth)
  }

}

function columar(data = [], ds = [], color2 = [],barWidth=24) {
  // MS判断多条数据还是单条数据   true为单条false为多条
  let list = []
  for (let i = 0; i < data.length; i++) {
    //     MS?
    // list.push({
    //     type: 'bar',
    //     data: ds,
    //     stack:"Search Engine",
    // emphasis: {//折线图的高亮状态。
    //   focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
    // },
    //     itemStyle: {
    //         normal:{
    //             color: color1,
    //             lineStyle: {
    //                 color: color1
    //               }
    //         }
    //       }
    // })  : 
    list.push({
      name: data[i],
      type: 'bar',
      barWidth: barWidth,
      data: ds[i],
      stack: "Search Engine",
      emphasis: { //折线图的高亮状态。
        focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
      },
      itemStyle: {
        normal: {
          color: color2[i],
          lineStyle: {
            color: color2[i]
          }
        }
      }
    })
  }
  return list
}