Echarts在线免费图表

 
            let sourceData = [
  {
    source_name: 'Microsoft',
    count: 1.21
  },
  {
    source_name: 'Google',
    count: 1.21
  },
  {
    source_name: 'Igalia',
    count: 0.61
  },
  {
    source_name: 'Maptek',
    count: 0.61
  },
  {
    source_name: 'OZON',
    count: 0.61
  },
  {
    source_name: 'Somewhere that is totally not Las Vegas',
    count: 0.61
  }
];

// let sourceData = [
//   {
//     source_name: 'Wikimedia',
//     count: 15.22
//   },
//   {
//     source_name: 'Wikimedia Foundation',
//     count: 2.24
//   },
//   {
//     source_name: 'Arevit Solutions Inc',
//     count: 0.75
//   },
//   {
//     source_name: 'ThoughtWorks',
//     count: 0.75
//   },
//   {
//     source_name: 'iOS Developer',
//     count: 0.75
//   },
//   {
//     source_name: 'Intact Financial Corporation',
//     count: 0.75
//   }
// ];

let sumCount = sourceData.reduce(function (prev, curr, idx, arr) {
  return prev + curr.count;
}, 0);

let formatSeries = () => {
  let arr = [];
  sourceData.forEach((item, i) => {
    arr.push({
      name: item.source_name,
      type: 'bar',
      stack: 'stack1', // 数据堆叠，把所有bar显示成一行
      barWidth: 22,
      // barMinHeight: 120,
      itemStyle: {
        barBorderRadius: 10
      },
      data: [
        {
          value: sourceData[i].count,
          label: {
            show: true,
            width: 120,
            overflow: 'truncate',
            color: 'inherit',
            position: 'center',
            formatter: [
              '{name|' + item.source_name + '}',
              '{count|' + sourceData[i].count + '%}'
            ].join('\n'),
            rich: {
              //   通过调整样式来调整label排版
              name: {
                fontSize: 16,
                padding: [-20, 0, 10, 0]
              },
              count: {
                color: '#ffffff',
                fontSize: 14,
                padding: [0, 0, 0, 10],
                fontWeight: 100
              }
            }
          }
        }
      ]
    });
  });

  return arr;
};

option = {
  xAxis: [
    {
      type: 'value',
      show: false,
      max: sumCount
    }
  ],
  yAxis: [
    {
      type: 'category',
      show: false
    }
  ],
  tooltip: {
    show: true,
    formatter: function (params) {
      return params.seriesName + '</br>' + params.value + '%';
    }
  },
  // color: ['#618cff', '#ffa57c', '#fb7636', '#24b314', '#8452e7', '#00d3e2'],
  color: ["#1890ff", "#33b1ff", "#4dceff", "#67e2ff", "#7cdeff", "#90d2ff"],
  // color: ["#1890ff", "#4dceff"],
  series: formatSeries()
};