Echarts在线免费图表

 
            const dataSource = [
   { name: '大豆', value: 580 },
   { name: '小麦', value: 536 },
   { name: '土豆', value: 500 },
   { name: '土豆', value: 350 },
   { name: '番茄', value: 300 },
   { name: '韭菜', value: 280 },
   { name: '油麦菜', value: 240 },
   { name: '青椒', value: 200 },
];
let dataSourcemax = 0;
dataSource.forEach((item) => {
   dataSourcemax += item.value;
});
const color = ['#975fe4', '#45a5ff', '#81c926', '#7585a2', '#fad337', '#f2637b', '#ff8e49', '#37cbcb',]
let salvProMax = [dataSourcemax, dataSourcemax, dataSourcemax, dataSourcemax, dataSourcemax, dataSourcemax, dataSourcemax, dataSourcemax]

option = {
   backgroundColor: '#000',
   grid: [
      {
         left: 40,
         top: 40,
         right: 50,
         bottom: 40,
         containLabel: true,
      },
   ],
   xAxis: [
      {
         gridIndex: 0,
         type: 'value',
         axisLabel: { show: false },
         axisLine: { show: false },
         splitLine: { show: false },
         axisTick: { show: false },
      },
      {
         gridIndex: 0,
         type: 'value',
         max: 100,
         axisLabel: { show: false },
         axisLine: { show: false },
         splitLine: { show: false },
         axisTick: { show: false },
      },
   ],
   yAxis: [
      {
         gridIndex: 0,
         type: 'category',
         inverse: true,
         data: dataSource.map((item) => item.name),
         axisTick: { show: false },
         axisLine: { show: false },
         splitLine: { show: false },
         position: 'left',
         axisLabel: {
            width: 80,
            padding: [0, 0, 0, -40],
            align: 'left',
            formatter: (name, index) => {
               return `{value|${name}}`;
            },
            rich: {
               value: {
                  color: '#fff',
                  fontSize: 12,
                  fontWeight: 500,
               },
            },
         },
      },
      {
         gridIndex: 0,
         type: 'category',
         position: 'right',
         inverse: true,
         margin: 20,
         data: dataSource.map((item) => item.name),
         axisTick: { show: false },
         axisLine: { show: false },
         splitLine: { show: false },
         axisLabel: {
            align: 'right',
            padding: [0, -40, 0, 0],
            formatter: (_, index) => {
               return `{value|${(dataSource[index].value / dataSourcemax * 100).toFixed(2)}%}`;
            },
            rich: {
               value: {
                  color: '#fff',
                  fontSize: 12,
                  fontWeight: 500,
               },
            },
         },
      },
   ],
   series: [
      {
         z: 1,
         type: 'bar',
         xAxisIndex: 0,
         yAxisIndex: 0,
         barWidth: 10,
         data: dataSource.map((item) => item.value),
         silent: true,
         itemStyle: {
            emphasis: {
               barBorderRadius: [0, 20, 20, 0],
            },
            normal: {
               // barBorderRadius: [0, 20, 20, 0],
               barBorderRadius: [30, 30, 30, 30],
               color: function (params) {
                  return color[params.dataIndex]
               },
               // 柱状图上显示数字
               label: {
                  show: true, // 开启显示
                  position: 'insideRight', // 在上方显示
                  // offset: [0, -20], //  5以上用水平垂直 
                  textStyle: {
                     // 数值样式
                     fontSize: 12,
                     color: '#fff',
                     fontWeight: 500,
                     padding: [0, 0, 40, 0], // 5以上版本无效
                  },
               },
            },
         },
      },
      {
         z: 3,
         name: '背景',
         type: 'bar',
         barWidth: 10,
         barGap: '-100%',
         data: salvProMax,
         itemStyle: {
            normal: {
               color: function (params) {
                  return color[params.dataIndex]
               },
               opacity: 0.3,
               barBorderRadius: [30, 30, 30, 30],
            },
         },
      },
   ],
};