Echarts在线免费图表

 
              // 默认数据
  let pieData = [
    { value: 160, name: '车间1', },
    { value: 130, name: '车间2', },
    { value: 200, name: '车间3', },
    { value: 180, name: '车间4', },
    { value: 220, name: '车间5', },
    { value: 310, name: '车间6', },
    { value: 110, name: '其他', },
  ];
  // 默认配色
  let colorList = ['#fe8019', '#fec429', '#4a90e2', '#9095a7', '#4cb051', '#ec0019', '#dcb093'];
  let datas = pieData.map(item=>{
    return {
      value: item.value && Number(item.value) || 0,
      name: item.name,
    }
  })
  let sum = datas.reduce((per, cur) => {
    if (per <= cur.value) {
      per = cur.value;
    }
    return per
  }, 0);
  sum = sum + Math.floor(sum / 10);
  let dataMAX = datas.map(item=> sum );
  let option = {
    tooltip: {
      trigger: 'axis', //axis , item
      axisPointer: { type: 'shadow' }, //触发效果 移动上去 背景效果
      formatter: (params) => {
        return params[1].marker + ' ' + params[1].name + ' ' + (params[1].value || 0)
      },
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: 10,
      top:'10%',
      containLabel: true,
    },
    xAxis: {
      show: false,
      type: 'value',
    },
    yAxis: [
      {
        type: 'category',
        nameGap: 3,
        inverse: false, // 是否翻转
        nameTextStyle: {
          fontSize: 16,
          color: "#3e3e3e",
          align: "center",
          fontWeight:'700',
          padding: [0, 0, 0, -36]
        },
        axisLabel: {
          show: true,
          align: 'right',
          textStyle: {
            fontSize: 14,
            color: '#282c34',
            rich: {
              name: {
                padding: [0,10,0,50],
                width:150,
                borderWidth:1,
              },
            },
          },
          formatter: (name) => {
            var index = datas.map((item) => item.name).indexOf(name) + 1;
            return [
              // '{' + 'index' + '|' +'NO.'+ index + '}',
              '{name|' + name + '}',
            ].join('');
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: datas.map((item) => item.name),
      },
      {
        nameGap: 5,
        inverse: false, // 是否翻转
        nameTextStyle: {
          fontSize: 12,
          color: "#3e3e3e",
          align: "center",
          fontWeight:'700',
          padding: [0, -60, 0, 0]
        },
        type:'category',
        axisLabel:{
          show:true,
          margin:30,//右侧y轴数字的外边距
          textStyle: {
            fontSize: 14,
            color: '#282c34',
          },
          formatter: (value) => {
            return value
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: datas.map((item) => {
          return item.value
        }),
      }
    ],
    series: [
      {
        name: '背景',
        type: "bar",
        stack: '总量',
        barGap: '-100%',
        symbol: 'fixed',
        itemStyle: {
          normal: {
            color: '#f6f8f9'
          },
        },
        data: dataMAX,
        animation: false, //关闭动画
        barWidth: 20,
        z: 0
      },
      {
        name: '能源指数',
        type: 'bar',
        zlevel: 1,
        label: {
          show: false,
          position: 'right', // 位置
          color: '#282c34',
          fontSize: 14,
          distance: 10, // 距离
          // formatter: '{c}%' // 这里是数据展示的时候显示的数据
        }, // 柱子上方的数值
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: (params) => {
              return colorList[params.dataIndex]
            },
          },
        },
        barWidth: 20,
        data: pieData.map(item=>item.value),
      },
    ],
  };