Echarts在线免费图表

 
            var max = 10000;
option = {
  animationDurationUpdate: 5000,
  animationDuration: 500,
  xAxis: {
    min: 1,
    max: 31,
    interval: 6, // 间隔
    splitLine: { show: false },
    axisLabel: { margin: 5, color: '#B0B2C4' },
    axisTick: { show: false },
    axisLine: { show: false }
  },
  yAxis: {
    inverse: true,
    interval: 1,
    data: ['1月'],
    axisLine: { show: false },
    axisLabel: { margin: 10, color: '#B0B2C4' },
    axisTick: { show: false },
    splitLine: { lineStyle: { color: '#DFE5F6' } }
  },
  series: [
    {
      id: 'main',
      data: [{ value: [8, '11月', 3600], groupId: 'month11' }],
      type: 'scatter',
      symbolSize: (value, param) => {
        var num = value[2];
        return 200 * (num / max)
      },
      universalTransition: { enabled: true }
    },
    {
      id: 'test',
      data: [{ value: [28, '5月', 2500], groupId: 'month12' }],
      type: 'scatter',
      symbolSize: (value, param) => {
        var num = value[2];
        return 200 * (num / max)
      },
      universalTransition: { enabled: true }
    }
  ]
};

setTimeout(function () {
  option = {
    polar: [{}],
    angleAxis: [{
      show: false,
      min: 0,
      max: 10000,
      startAngle: 90,
      clockwise: false,
    }],
    tooltip: {
      trigger: "item",
      formatter: function ({ marker, seriesId, data } = params) {
        return `${marker} ${seriesId}</br>数量：${data.value[2]}个</br>投资：${data.value[1]}亿`;
      },
    },
    xAxis: {
      axisLabel: { show: false }
    },
    yAxis: {
      splitLine: { show: false },
      axisLabel: { show: false },
    },
    radiusAxis: [
      {
        type: 'category',
        data: ['x'],
        interval: 1,
        inverse: true,
        axisLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false }
      }
    ],
    series: [
      {
        hoverAnimation: false,
        name: "总",
        silent: true,
        id: 'max',
        type: 'bar',
        data: [{ value: ['x', max, 100], groupId: 'month10' }],
        coordinateSystem: 'polar', //使用极坐标系
        z: 1,
        label: {
          show: false
        },
        barMaxWidth: 30,
        barGap: '-100%',
        itemStyle: {
          color: "#eee"
        },
        universalTransition: { seriesKey: ['max'], enabled: true }

      },
      {
        data: [{ value: ['x', 3600, 40], groupId: 'month11' }],
        type: 'bar',
        id: 'main',
        z: 2,
        coordinateSystem: 'polar',
        roundCap: true,
        barMaxWidth: 30,
        barGap: '-100%',
        universalTransition: { seriesKey: ['main'], enabled: true }
      },
      {
        data: [{ value: ['x', 2500, 60], groupId: 'month12' }],
        type: 'bar',
        id: 'test',
        z: 3,
        coordinateSystem: 'polar',
        roundCap: true,
        barMaxWidth: 30,
        barGap: '-100%',
        universalTransition: { seriesKey: ['test'], enabled: true }
      },
    ]
  };
  myChart.setOption(option);
}, 1500);