Echarts在线免费图表

 
            const arr = [
   {
      name: "杭州市",
      value: 1297,
   },
   {
      name: "宁波市",
      value: 999,
   },
   {
      name: "温州市",
      value: 844,
   },
   {
      name: "嘉兴市",
      value: 791,
   },
   {
      name: "湖州市",
      value: 766,
   },
   {
      name: "绍兴市",
      value: 743,
   },
   {
      name: "金华市",
      value: 633,
   },
   {
      name: "衢州市",
      value: 616,
   },
   {
      name: "舟山市",
      value: 525,
   },
   {
      name: "台州市",
      value: 470,
   },
   {
      name: "丽水市",
      value: 464,
   },
]

const listData = arr.sort((a, b) => {
   return a.value - b.value;
});

const max = Math.max(...listData.map(r => r.value));
const spanColors = ["#13B5B1", "#FFF100", "#0195C2", "#00FFC0"];
const spanStyles = {};

for (let i = 0; i < spanColors.length; i++) {
   const label = `0${i}`;
   spanStyles[`span${label}`] = {
      width: 10,
      height: 10,
      borderRadius: 5,
      shadowColor: spanColors[i],
      shadowBlur: 10,
      backgroundColor: spanColors[i],
   };
   if (i > 0) {
      spanStyles[`a0${label}`] = {
         color: spanColors[i],
      };
   }
}

option = {
   backgroundColor: '#041921',
   tooltip: {
      show: false,
   },
   grid: {
      top: "1%",
      left: "10%",
      right: "10%",
      bottom: "1%",
      containLabel: true,
   },
   xAxis: {
      type: "value",
      axisLabel: {
         color: "#fff",
      },
      splitLine: {
         show: false,
      },
      max,
   },
   yAxis: {
      type: "category",
      offset: 20,
      axisLabel: {
         margin: -10,
         padding: [0, 5, 0, 0],
         color: "#fff",
         formatter: (name, index) => {
            const obj = {
               0: "01",
               1: "02",
               2: "03",
            };
            const label = obj[10 - index] || "00";
            return `{a${label}|${name}}{b|} {span${label}|}`;
         },
         rich: {
            b: {
               width: 5,
            },
            ...spanStyles,
         },
      },
      axisLine: {
         onZero: false,
         lineStyle: {
            color: "rgba(21, 200, 221,0.2)",
         },
      },
      splitLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      data: listData.map(r => r.name),
   },
   series: [
      {
         name: "地市资源排行",
         type: "bar",
         barWidth: 14,
         label: {
            show: false,
         },
         data: listData.map((r, i) => {
            const itemStyle = {
               borderWidth: 2,
               color: "#13B5B1",
               borderRadius: 8, //圆角
               borderColor: "#041921",
            };
            if (i >= 8 && i <= 10) {
               const colors = ["#00FFC0", "#0195C2", "#FFF100"];
               itemStyle.color = colors[i - 8];
            }

            return {
               ...r,
               itemStyle,
            };
         }),
         z: 1,
      },
      {
         type: "bar",
         barGap: "-105%", // 柱形图偏移
         data: listData.map((items, i) => {
            const value = Math.max(...listData.map(item => item.value));
            const itemStyle = {
               color: "none",
               borderRadius: 8, //圆角
               borderColor: "#041921",
            };
            if (i >= 8 && i <= 10) {
               const colors = ["#00FFC0", "#0195C2", "#FFF100"];
               itemStyle.color = colors[i - 8];
            }
            return {
               value,
            };
         }),
         barWidth: 16,
         itemStyle: {
            color: "none",
            borderRadius: 8, //圆角
            borderColor: "#13B5B1",
         },
         label: {
            show: true,
            position: "right",
            color: "#13B5B1",
            fontSize: 12,
            formatter: params => {
               const name = params.name;
               const value = listData.find(item => item.name === name).value;
               return value;
            },
         },
         z: 0,
      },
   ],
};