Echarts在线免费图表

 
            //后端传过来的起始值
var tong = [{ qi: '滚筒2', zhi: 'D#' }, { qi: '滚筒2', zhi: 'W#' }, { qi: '滚筒3', zhi: 'A#' }, { qi: '滚筒4', zhi: 'Z#' }, { qi: '滚筒5', zhi: 'F#' },
{ qi: '滚筒6', zhi: 'G#' }, { qi: '滚筒7', zhi: 'W#' }, { qi: '滚筒8', zhi: 'G#' }, { qi: '滚筒9', zhi: 'W#' }, { qi: '滚筒10', zhi: 'G#' },]
//后端传过来的x轴例如A#
var phabetEds = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
let darkColors = [
   '#8B0000', // 深红色
   '#800080', // 紫色
   '#2F4F4F', // 深青色
   '#000080', // 深蓝色
   '#8B4513', // 深橙色
   '#556B2F', // 橄榄绿
   '#483D8B', // 深紫色
   '#8B4513', // 褐色
   '#9932CC', // 深紫罗兰色
   '#8B008B', // 深洋红色
   '#2E8B57', // 海洋绿
   '#800000', // 栗色
   '#4B0082', // 靛紫色
   '#2F4F4F', // 深石板灰
   '#00008B', // 深蓝色
   '#8B008B', // 深洋红色
   '#556B2F', // 橄榄绿
   '#4B0082', // 靛紫色
   '#8B4513', // 深橙色
   '#8B0000'  // 深红色
];
function getLetters(num) {
   if (num) {//获取26个字母型号
      let uppercaseAlphabet = '';
      for (let i = 65; i <= 90; i++) {
         uppercaseAlphabet += String.fromCharCode(i);
      }
      return phabetEds.length ? phabetEds : uppercaseAlphabet
   } else {//计算轴有多少个
      let arry = []
      for (let j = 0; j < tong.length; j++) {
         if (arry.findIndex(item => item == tong[j].qi) == -1) {
            arry.push(tong[j].qi)
         }
      }
      return arry.length
   }

}
var ZiMu = [], phabet = getLetters(1), yTotal = getLetters(0)
let yNums = 500, LineNode = [], links = []//y轴上的
for (let j = 0; j < tong.length; j++) {
   //找有没有相同的
   let obj = ZiMu.find(item => item.name === tong[j].qi)
   LineNode.push({
      id: `${tong[j].qi}+${tong[j].zhi}`,
      name: '',
      value: [0, typeof obj == "object" ? obj.value[1] : yNums],
      symbolSize: [0, 0]
   })
   if (!tong[j].color) {//有color颜色就不创建新颜色，如果没有就创建新的
      tong[j].color = darkColors[tong.findIndex(obj => obj.qi === tong[j].qi) == -1 ? j : tong.findIndex(obj => obj.qi === tong[j].qi)]
   }
   if (typeof obj != "object") {
      ZiMu.push({
         name: tong[j].qi,
         value: [0, yNums],
         symbol: 'rect',
         symbolSize: [40, 20],
         itemStyle: {
            color: '#02AEFD',
            borderColor: '#02AEFD',
            // borderWidth: 3,

         },
      })
      yNums = yNums - 50
   }
   links.push({
      source: tong[j].qi,
      target: `${tong[j].qi}+${tong[j].zhi}`,
      lineStyle: {
         color: tong[j].color,
      }
   }, {
      source: `${tong[j].qi}+${tong[j].zhi}`,
      target: tong[j].zhi,
      lineStyle: {
         color: tong[j].color,
      }
   })
}
let nums = 60//横坐标字母间隔起始值
for (let i = 0; i < phabet.length; i++) {
   ZiMu.push({
      name: phabet[i] + "#",
      value: [nums, 0],
      symbol: 'rect',
      symbolSize: [20, 20],
      itemStyle: {
         color: '#41D980',//
         borderColor: '#41D980',
         // borderWidth: 3,
      }
   })
   for (let op = 0; op < LineNode.length; op++) {
      if ((phabet[i] + '#') === LineNode[op].id.split('+')[1]) {
         LineNode[op].value[0] = nums
      }
   }
   nums = nums + 40
}
data = [...ZiMu, ...LineNode];
option = {
   grid: {
      left: 30,
      right: 0
   },
   xAxis: {
      // min: 0,
      // max: 1000,
      show: false,
      type: 'value',
   },
   yAxis: {
      // min: 0,
      // max: 1000,
      show: false,
      type: 'value',
   },
   series: [
      {
         type: 'graph',
         coordinateSystem: 'cartesian2d',
         label: {
            show: true,
            position: 'inside', // inside
            // 文字
            color: '#fff',
            fontFamily: 'Microsoft YaHei',
            fontSize: 10,
            // offset: [0, 40], // 偏移量
            distance: 20, // 距离元素距离
            formatter: function (item) {
               return item.data.name;
            },
         },
         data: data,
         links: links,
         lineStyle: {
            normal: {
               opacity: 1,
               curveness: 0,
               width: 3//线段的比例是千分之4
            }
         }
      },
      {
         type: 'lines',
         polyline: true,
         coordinateSystem: 'cartesian2d',
         lineStyle: {
            type: 'solid',
            width: 0,
         },
      },
   ],
};