Echarts在线免费图表

 
            
// y轴
var yData = ["1月", "2月", "3月", "4月", "5月"] // JSON.parse(vardata.yData)
// x轴数据
var xDataYdl = [10, 20, 30, 40, 80] // JSON.parse(vardata.xDataYdl)
// x轴同比
var xDataTb = [11, 22, -33, 44, -55] //JSON.parse(vardata.xDataTb)


// 最大值
var maxNum = ''
xDataYdl.forEach(v => {
   maxNum = maxNum > v ? maxNum : v
})
var xDataMax = new Array(xDataYdl.length).fill(maxNum * 1.4)
var option = {
   backgroundColor: '#000',
   grid: {
      top: 0,
      left: 0,
      right: 30,
      bottom: 0,
      containLabel: true
   },
   xAxis: {
      type: 'value',
      axisLine: {
         show: false,
      },
      splitLine: {
         show: false,
      },
      axisLabel: {
         show: false,
      },
      axisTick: {
         show: false,
      },
   },
   yAxis: [
      {
         type: 'category',
         inverse: true,
         data: yData,
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisLabel: {
            show: true,
            textStyle: {
               color: '#fff',
               fontSize: 14,
            },
         },
      },
   ],
   series: [
      {
         type: 'bar',
         barWidth: '30%',
         color: 'yellow',
         itemStyle: {
            normal: {
               label: {
                  show: true,
                  position: 'right',
                  textStyle: {
                     color: 'green',
                     fontSize: 12
                  },
                  formatter: `本期{c}万元`
               }
            }
         },
         data: xDataYdl,
         z: 1,
      },
      {
         type: 'bar',
         barWidth: '50%',
         barGap: '-135%',
         label: {
            show: true,
            position: 'right',
            fontSize: 14,
            formatter: (params) => {
               const dataIndex = params.dataIndex
               const showData = xDataTb[dataIndex]
               if (showData >= 0) {
                  return `同比{z|+${showData}%}`
               }
               return `同比{j|${showData}%}`
            },
            rich: {
               z: {
                  color: 'green'
               },
               j: {
                  color: 'red'
               }
            }
         },
         itemStyle: {
            color: 'rgba(0,0,0,0.1)',
            borderColor: 'red',
            borderWidth: 2,
         },
         data: xDataMax,
         z: 2,
      },
   ],
};