Echarts在线免费图表

 
            const data = [
   { name: "直接投资", unit: "亿美元", value: [0.12, 5.17] },
   { name: "间接投资", unit: "亿美元", value: [0.01, 0.97] }
]

// 椭圆宽高参数
const barWidth = 80
const symbolHeight = 20
// 圆柱体径向颜色配置
const itemStyleColor = [
   [
      { offset: 0, color: 'rgba(120, 183, 255, .53)' },
      { offset: 1, color: 'rgba(11, 120, 227, .53)' },
   ],
   [
      { offset: 0, color: 'rgba(255, 206, 137, .53)' },
      { offset: 1, color: 'rgba(255, 167, 42, .53)' },
   ],
]
// 椭圆颜色配置
const pictorialBarColor = [
   [
      { offset: 0, color: 'rgba(11, 120, 227, 1)' },
      { offset: 1, color: 'rgba(120, 183, 255, .8)' },
   ],
   [
      { offset: 0, color: 'rgba(255, 167, 42, 1)' },
      { offset: 1, color: 'rgba(255, 218, 164, .8)' },
   ],
]
// 底部波浪纹椭圆颜色配置
const effectScatterColor = [
   { offset: 0, color: 'rgba(14, 195, 255, .2)' },
   { offset: 1, color: 'rgba(0, 72, 203,  .2)' },
]

const totalData = [Array(data.length).fill(0), ...data.reduce((pre, cur, index) => {
   pre[index] = cur.value.map(Number).map((el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0))
   return pre
}, [])]

const series = data.reduce((p, c, i, array) => {
   p.push(
      {
         stack: '1',
         type: 'bar',
         silent: true,
         barWidth,
         data: c.value,
         name: c.name,
         label: {
            formatter: `{c} ${c.unit}`,
            color: '#666',
            offset: [0, i % 2 === 0 ? 16 : 0],
            show: true,
            position: 'right',
            fontSize: 14,
            fontWeight: 400,
            fontFamily: 'MicrosoftYaHei',
         },
         itemStyle: {
            normal: {
               // 前两位 x, y，代表圆心，数值范围 0-1；
               // 第三位 r，代表半径，数值范围 0-1
               color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, itemStyleColor[i])
            }
         }
      },
      {
         z: i + 10,
         type: 'pictorialBar',
         symbolPosition: 'end',
         symbolOffset: [0, '-50%'],
         symbolSize: [barWidth, symbolHeight],
         data: totalData[i],
         itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: pictorialBarColor[i] } },
         tooltip: { show: false },
      },
      {
         type: 'effectScatter',
         symbolSize: [barWidth, symbolHeight],
         symbolOffset: [0, '30%'],
         z: 0,
         data: Array(data.length).fill(0),
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, effectScatterColor),
            },
         },
         tooltip: { show: false },
      },
   )

   // 补充顶部椭圆球
   if (p.length === (array.length) * 3) {
      p.push(
         {
            z: array.length * 3,
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: totalData[totalData.length - 1],
            symbolOffset: [0, '-50%'],
            symbolSize: [barWidth, symbolHeight],
            itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: pictorialBarColor[pictorialBarColor.length - 1] } },
            tooltip: { show: false },
         }
      )
      return p
   }

   return p
}, [])

option = {
   backgroundColor: 'transparent', //背景色
   legend: {
      data: data.map(item => item.name),
      textStyle: { fontSize: 14, color: '#333' },
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 15,
      top: '0',
      selectedMode: false,
   },
   //提示框
   tooltip: {
      show: false,
      trigger: 'axis',
      axisPointer: {
         type: 'none',
      },
   },
   grid: {
      top: '18%',
      left: '5%',
      bottom: '10%',
      right: '5%',
      containLabel: true,
   },
   xAxis: {
      offset: 20,
      data: ['去年', '今年'],
      axisTick: {
         show: false
      },
      axisLine: {
         show: false
      },
      axisLabel: {
         show: true,
         fontSize: 14,
         textStyle: {
            color: '#333'
         },
         fontFamily: 'MicrosoftYaHei'
      }
   },
   yAxis: {
      splitLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: false
      },
      axisLabel: {
         show: false
      }
   },
   series,
};