Echarts在线免费图表

 
               // Mock数据
const mockData = {
     xdata: [
         "停运厂站",
         "停运厂站1"
    ] ,
    result: [
        { name: '全停', data:[0,0]},
        { name: '部分停', data: [66,0]},

    ],
    result1: [
        { name: '可恢复', data:[0,35]},
        { name: '不可恢复', data: [0,44]},
    ]
}  
 // 获取第一个柱状图的数据
let dataForFirstBar = mockData.result;

// 获取第二个柱状图的数据
let dataForSecondBar = mockData.result1; // 更改为 result1 来获取第二个柱状图的数据    
        
const color = [
  [{ offset: 0, color: 'rgba(126, 142, 159, .85)' }, { offset: 0.5, color: 'rgba(126, 142, 159, .85)' }, { offset: 0.5, color: 'rgba(161, 184, 206, .9)' }, { offset: 1, color: 'rgba(161, 184, 206, .9)' }],
    [{ offset: 0, color: 'rgba(204, 145, 1, .85)' }, { offset: 0.5, color: 'rgba(204, 145, 1, .85)' }, { offset: 0.5, color: 'rgba(253, 179, 0, .9)' }, { offset: 1, color: 'rgba(253, 179, 0, .9)' }],
    [{ offset: 0, color: 'rgba(126, 142, 159, .85)' }, { offset: 0.5, color: 'rgba(126, 142, 159, .85)' }, { offset: 0.5, color: 'rgba(161, 184, 206, .9)' }, { offset: 1, color: 'rgba(161, 184, 206, .9)' }],
    [{ offset: 0, color: 'rgba(0, 196, 0, .85)' }, { offset: 0.5, color: 'rgba(0, 196, 0, .85)' }, { offset: 0.5, color: 'rgba(0, 255, 0, .85)' }, { offset: 1, color: 'rgba(0, 255, 0, .85)' }],
]
const color2 = ['#ffc436', '#ffc436']
const color3 = ['#aac0d7', '#83ff83']

// tooltip
const tooltip = { 
  
}

const legend = {
    data: ['全停', '部分停'],
    textStyle: { fontSize: 12, color: '#fff'},
    itemWidth: 24,
    itemHeight: 15,
    itemGap: 15,
    top: '2%',
    right: '2%',
    selectedMode: false
}
const grid = { top: '15%', left: '12%', right: '2%', bottom: '25%'}
// xAxis
const xAxis = { 
    axisTick: { show: true },
    axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
    axisLabel: { 
        rotate: 0,
        textStyle: { fontSize: 12, color: '#fff' },
    },
    data: mockData.xdata,
}

// yAxis
const yAxis = [{ 
    axisTick: { show: false },
    axisLine: { show: false },
    splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
    axisLabel: { textStyle: { fontSize: 14, color: '#fff' } }
},{
    show: false,
    splitLine: { show:false },
    axisLine: { show: false },
    axisTick: { show: false },
}]
const diamondData = mockData.result.reduce((pre, cur, index) => {
    pre[index] = cur.data.map((el, id) => el + ( pre[index - 1] ? pre[index - 1][id] : 0))
    return pre
}, [])

const diamondData1 = mockData.result1.reduce((pre, cur, index) => {
    pre[index] = cur.data.map((el, id) => el + ( pre[index - 1] ? pre[index - 1][id] : 0))
    return pre
}, [])


let series = mockData.result.reduce((p, c, i, array) => {
    p.push({
        z: i + 1,
        stack: '总量',
        type: 'bar',
        name: c.name,
        barGap: '100%',
        barWidth: 24,
        data: c.data,
        itemStyle:{ color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
    },{
        z: i + 10,
        type: 'pictorialBar',
        symbolPosition: 'end',
        symbol: 'diamond',
        symbolOffset: ['-100%', '-50%'],
        symbolSize: [24, 10],
        data: diamondData[i],
        itemStyle: { color: color2[i],opacity:diamondData[i]},
        tooltip: { show: false },
    })
    return p
}, [])

let newSeriesData = mockData.result1.reduce((p, c, i, array) => {

  if (dataForSecondBar[0].data[0] == 1) { 
    p.push({
      z: i + 1 + mockData.result1.length,
      stack: '总量1',
      type: 'bar',
      name: c.name,
      symbolOffset: ['100%', '-50%'],
      barGap: '100%',
      barWidth: 24,
      data: c.data,
      itemStyle: { 
        color: { 
          type: 'linear', 
          x: 0, 
          x2: 1, 
          y: 0, 
          y2: 0, 
          colorStops: color[i+2] 
        },
        // 设置透明度为0
        opacity: 0 
      },
    },{
      z: i + 10 + mockData.result1.length,
      type: 'pictorialBar',
      symbolPosition: 'end',
      symbol: 'diamond',
      symbolOffset: ['100%', '-50%'],
      symbolSize: [24, 10],
      data: diamondData1[i],
      itemStyle: { 
        color: color3[i],
        // 设置透明度为0
        opacity: 0 
      },
      tooltip: { show: false },
    });
  }else {
    p.push({
      z: i + 1 + mockData.result1.length,
      stack: '总量1',
      type: 'bar',
      name: c.name,
      symbolOffset: ['100%', '-50%'],
      barGap: '100%',
      barWidth: 24,
      data: c.data,
      itemStyle: { 
        color: { 
          type: 'linear', 
          x: 0, 
          x2: 1, 
          y: 0, 
          y2: 0, 
          colorStops: color[i+2] 
        },
        // 设置透明度为1
        opacity: 1 
      },
    },{
      z: i + 10 + mockData.result1.length,
      type: 'pictorialBar',
      symbolPosition: 'end',
      symbol: 'diamond',
      symbolOffset: ['100%', '-50%'],
      symbolSize: [24, 10],
      data: diamondData1[i],
      itemStyle: { 
        color: color3[i],
        // 设置透明度为1
        opacity: 1 
      },
      tooltip: { show: false },
    });
  }

  return p;
}, []);
series = series.concat(newSeriesData); // 在现有的series中加入新的系列


const dataZoom = [{
    show: false,
    type: 'slider',
    startValue: 0,
    endValue: 7,
    moveOnMouseWheel: true,
    moveOnMouseMove: true,
    zoomOnMouseWheel: false,
}]

option = { tooltip, legend, xAxis, yAxis, series, grid, dataZoom, backgroundColor: 'rgba(0, 0, 0, .8)' }