Echarts在线免费图表

 
            

const nullData = 'data:image/png;base64,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'

// 暂无数据配置
function setNulldata(data = [], top = 330) {
   return [
      {
         type: 'image',
         z: 666,
         invisible: data.length > 0, // 有数据就隐藏
         style: {
            image: nullData,
            width: 100,
            shadowBlur: 0,
            shadowColor: '#000',
            shadowOffsetX: '1',
            shadowOffsetY: '1',
         },
         left: 'center',
         top: top,
      },
      {
         type: 'text',
         left: 'center',
         z: 666,
         top: top + 80,
         silent: true,
         invisible: data.length > 0, // 有数据就隐藏
         style: {
            fill: '#9d9d9d',
            fontWeight: 'bold',
            text: '暂无数据',
            fontFamily: 'Microsoft YaHei',
            fontSize: '20px',
         },
      },
   ];
}
// x轴配置，若无数据时不显示
function xAxisStyle(data = []) {
   return {
      type: 'category',
      show: data.length > 0,
      axisLine: {
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.4)',
         },
      },
      splitLine: {
         show: false,
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.15)',
         },
      },
      axisTick: {
         show: false,
      },
      splitArea: {
         show: false,
      },
      axisLabel: {
         interval: 0,
         color: '#89BAE5',
         fontSize: 14,
      },
   };
}
// y轴配置，若无数据时不显示
function yAxisStyle(data = []) {
   return {
      type: 'value',
      show: data.length > 0,
      axisLine: {
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.4)',
         },
      },
      splitLine: {
         lineStyle: {
            type: 'dashed',
            color: 'rgba(255, 255, 255, 0.1)',
         },
      },
      axisTick: {
         show: false,
      },
      axisLabel: {
         interval: 0,
         color: '#89BAE5',
         fontSize: 14,
         fontFamily: 'DINPro-Medium',
      },
      splitArea: {
         show: false,
      },
   };
}

const tooltipStyle = {
   trigger: 'axis',
   backgroundColor: 'rgba(31, 46, 59, 0.6)',
   borderColor: 'rgba(87, 134, 173, 1)',
   axisPointer: {
      type: 'shadow',
   },
   textStyle: {
      fontSize: 12,
      color: '#fff',
   },
};

const title = {
   textStyle: {
      fontSize: 16,
      fontFamily: 'PingFang SC',
      fontWeight: 400,
      color: 'rgba(255,255,255,.6)',
   },
};


const data = [
   { name: 2021, value: 280 },
   { name: 2020, value: 271 },
   { name: 2019, value: 171 },
]
option = {
   backgroundColor: 'rgba(0,0,0,0.85)',
   color: ['#12B3FE', '#28D7E6'],
   title: {
      text: '标题',
      top: 110,
      left: 30,
      ...title,
   },
   graphic: {
      elements: [...setNulldata(data)],
   },
   grid: {
      top: 160,
      left: 30,
      bottom: 150,
      right: 10,
      containLabel: true,
   },
   tooltip: {
      ...tooltipStyle,
   },
   xAxis: {
      ...xAxisStyle(data),
      data: data.map(({ name }) => name),
      axisLine: {
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.9)',
         },
      },
   },
   yAxis: {
      ...yAxisStyle(data),
      splitNumber: 2,
   },
   series: [
      {
         name: '',
         type: 'bar',
         barWidth: 10,
         data: data.map(({ value }) => value),
         itemStyle: {
            color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
                  {
                     offset: 0,
                     color: '#12B3FE', // 0% 处的颜色
                  },
                  {
                     offset: 1,
                     color: 'rgba(18, 179, 254, 0)', // 100% 处的颜色
                  },
               ],
            },
         },
         label: {
            show: true,
            position: [2, -2],
            color: '#fff',
            formatter: ' ',
            width: 6,
            height: 3,
            lineHeight: 3,
            backgroundColor: '#fff',
         },
      },
   ],
}