carInsightSystem_wxapp/components/option/columnarOption.js

// 单柱状
import {doStr} from "./text"
export default function histogram(dx = [], ds = [], color1 = '', direction = true) {
  // direction   true为垂直 false为水平
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
      confine: true
    },
    
    dataZoom: direction?[{ //添加X轴滚动条
      type: 'inside',
      show: false,
      start: 0,
      end:30 ,
      handleSize: 30
    }]:[{
        type:"inside",
        show:false,
        yAxisIndex:[0],    
        // left:"93%",
        start:0,
        end:80,
        handleSize: 30
    }],
    //   legend: {
    //       x:'15',
    //       icon: 'rectangle',//data图标样式
    //       itemWidth: '10',//data图标大小
    //       itemHeight: '10',
    //       textStyle: {
    //           fontSize: '9'
    //       },
    //     data: data,
    // },
    //图表位置
    grid: {
      left: 20,
      right: 20,
      bottom: 10,
      top: 20,
      containLabel: true
    },
    xAxis: direction ? [{
      type: 'category',
      data: dx,
      axisTick: {
        show: false //去除刻度线
      },
      axisLine: {
        show: false, //去除轴线
      },
      axisLabel: {
        color: '#999999', //x轴文本颜色
        formatter:(value)=>{
            let res=doStr(value,4)
            return res
        },
        textStyle: {
          fontSize: 8
        }

      }
    }] : [{
      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',
        }
      }
    }],
    yAxis: direction ? [{
      type: 'value',
      axisTick: {
        show: false //去除刻度线
      },
      axisLine: {
        show: false //去除轴线
      },
      axisLabel: {
        color: '#999999', //y轴文本颜色
        textStyle: {
          fontSize: 9
        },
        formatter: (value) => {
          if (value >= 10000) {
            value = (value / 10000) + '万';
          }
          return value;
        }
      },
      splitLine: { //分割线
        // lineStyle:{
        //     // color:"#2d3436"

        // }
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#E8E8E8',
        }
      }
    }] : [{
        max:50,
        min:0,
        splitNumber:5,
      type: 'category',
      data: dx,
      axisTick: {
        show: false //去除刻度线
      },
      axisLine: {
        show: false, //去除轴线
      },
      axisLabel: {
        color: '#999999', //y轴文本颜色
        // formatter:(value)=>{
        //     let res=doStr(value,4)
        //     return res
        // },
        textStyle: {
          fontSize: 9
        }
      }
    }],
    series: {
      type: 'bar',
      data: ds,
      barWidth: direction?24:12,
    //   barGap:direction?"":"80%",
      stack: "Search Engine",
      emphasis: { //折线图的高亮状态。
        focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
      },
      itemStyle: {
        normal: {
          color: color1,
          // lineStyle: {
          //     color: color1
          //   }
        }
      }
    }
  }

}