Echarts在线免费图表

 
            let data = [
   {
      name: '累计观看人次',
      value: 560.0,
   },
   {
      name: '商品销量',
      value: 500
   }
]

let lines = [];
let stors = data.toSorted((a, b) => b.value - a.value);
let stor_max_value = stors[0].value;

let line1 = [
   {
      coord: [stor_max_value * 1.1, '累计观看人次']
   },
   {
      coord: [stor_max_value * 1.1, '商品销量']
   }
]
let linesData = [];
data.map((item) => {
   let line = [
      {
         coord: [item.value + stor_max_value * 0.05, item.name]
      },
      {
         coord: [stor_max_value * 1.1, item.name]
      }
   ]
   if (item.name === stors[stors.length - 1].name) {
      let nline = [
         {
            coord: [stor_max_value * 1.1, item.name],
            symbolSize: 0
         },
         {
            coord: [item.value + stor_max_value * 0.05, item.name],
            symbolSize: 10
         }
      ]
      linesData.push(nline);
   }
   linesData.push(line);
})
linesData.push(line1);

option = {
   backgroundColor: '#fff',
   yAxis: [
      {
         type: 'category',
         data: data.map((v) => v.name),
         inverse: true,
      },
      {
         type: 'category',
         data: [0],
         inverse: true,
         show: false,
      }
   ],
   color: ['#fd4c60'],
   xAxis: {
      type: 'value',
      max: stor_max_value + stor_max_value * 0.2
   },
   series: [
      {
         type: 'bar',
         barWidth: 30,
         data: data,
         markLine: {
            lineStyle: {
               type: 'solid'
            },
            symbolSize: 0,
            data: linesData
         }
      },
      {
         yAxisIndex: 1,
         type: 'bar',
         markPoint: {
            symbolSize: 0,
            symbolOffset: [50, 0],
            label: {
               show: true,
               formatter: (v) => {
                  return `{title|标题标题}\n{value|内容内容}`;
               },
               rich: {
                  title: {
                     color: '#000',
                     fontSize: 16
                  },
                  value: {
                     color: '#fd4c60',
                     fontSize: 16,
                     padding: [4, 0, 0, 0]
                  }
               }
            },
            data: [
               {
                  coord: [stor_max_value * 1.1, 0]
               },
               {
                  coord: [stor_max_value * 1.1, 0],
               }
            ]
         }
      }
   ]
};