web_dist/src/utils/echarts-utils.js

import * as echarts from 'echarts'

export function pieUtils(id, name, data) {
  // 验证 这个 是否被创建了
  let linearBarDom = echarts.getInstanceByDom(id)

  if (linearBarDom == null) {
    linearBarDom = echarts.init(id)
  }

  linearBarDom.setOption({
    title: {
      text: name, // 设置主标题文本
      show: true, // 显示标题组件
      x: 'left', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
      y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
      padding: [10, 0, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
    },
    // 这个就是旁边的那个颜色小方块
    legend: {
      //朝向 ： 垂直
      orient: 'vertical',
      x: 'right', //可设定图例在left、right、center
      y: 'top', //可设定图例在top、bottom、center
      padding: [10, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
      // 这个是 圆形旁边的 小方块 自定义
      formatter: function (name) {
        // 通过name获取到数组对象中的单个对象
        let singleData = data.filter(function (item) {
          return item.name == name
        })
        return `${name} | ${singleData[0].value} ${singleData[0].unit}`
      },
    },
    tooltip: {
      //提示框组件
      trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
      // backgroundColor: 'rgba(255,255,255,0.8)', //设置背景图片 rgba格式
      // color: 'black',
      // borderWidth: '1', //边框宽度设置1
      // borderColor: 'gray', //设置边框颜色
      // textStyle: {
      //   color: 'black', //设置文字颜色
      // },
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
      // formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%', //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
      //原来的 替换成我需要的 这个是鼠标移上去出现的
      formatter: function (data) {
        return `
        <span style="background-color:${data.color};display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px"></span>
              <span>${data.seriesName}<span><br/>
              <span>${data.name} : <span style="color:red;">${data.value}</span> ${data.data.unit}<span><br/>
              <span>百分比 : ${data.percent} %</span>
              `
      },
    },
    series: [
      {
        center: ['50%', '50%'],
        radius: '50%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
        type: 'pie', // 类型 圆形
        data: data, // 数据
        name: name, // 名字
        minAngle: 10, //设置扇形的最小占比 不然有些太小了 就看不到了
      },
    ],
    //color: createColorCode(data),
  })
  window.onresize = function () {
    //自适应大小, 不用的话不会自适应大小。
    linearBarDom.resize()
  }
}

export function pieUtilsOne(id, name, data) {
  // 验证 这个 是否被创建了
  let linearBarDom = echarts.getInstanceByDom(id)

  if (linearBarDom == null) {
    linearBarDom = echarts.init(id)
  }

  linearBarDom.setOption({
    title: {
      text: name, // 设置主标题文本
      show: true, // 显示标题组件
      x: 'left', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
      y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
      padding: [10, 0, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
    },
    // 这个就是旁边的那个颜色小方块
    legend: {
      //朝向 ： 垂直（vertical），水平（horizontal）
      orient: 'horizontal',
      type: 'scroll', // 分页滚动
      x: 'center', //可设定图例在left、right、center
      y: 'bottom', //可设定图例在top、bottom、center
      padding: [0, 10, 0, 10], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
      // 这个是 圆形旁边的 小方块 自定义
      formatter: function (name) {
        // 通过name获取到数组对象中的单个对象
        let singleData = data.filter(function (item) {
          return item.name == name
        })
        return `${name} | ${singleData[0].value} ${singleData[0].unit}`
      },
      textStyle: {
        rich: {
          a: {
            width: 120,
            lineHeight: 12
          }
        }
      }
    },
    tooltip: {
      //提示框组件
      trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
      // backgroundColor: 'rgba(255,255,255,0.8)', //设置背景图片 rgba格式
      // color: 'black',
      // borderWidth: '1', //边框宽度设置1
      // borderColor: 'gray', //设置边框颜色
      // textStyle: {
      //   color: 'black', //设置文字颜色
      // },
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
      // formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%', //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
      //原来的 替换成我需要的 这个是鼠标移上去出现的
      formatter: function (data) {
        return `
        <span style="background-color:${data.color};display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px"></span>
              <span>${data.seriesName}<span><br/>
              <span>${data.name} : <span style="color:red;">${data.value}</span> ${data.data.unit}<span><br/>
              <span>百分比 : ${data.percent} %</span>
              `
      },
    },
    toolbox: {
      // 导出组件
      show: 1,
      itemSize: 24,
      x: 'right',
      y: 'top',
      feature: {
        saveAsImage: {
          show: true,
          title: '下载图片',
          type: 'png'
        }
      }
    },
    series: [
      {
        center: ['50%', '50%'],
        radius: '50%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
        type: 'pie', // 类型 圆形
        data: data, // 数据
        name: name, // 名字
        minAngle: 15, //设置扇形的最小占比 不然有些太小了 就看不到了
      },
    ],
    //color: createColorCode(data),
  })
  window.onresize = function () {
    //自适应大小, 不用的话不会自适应大小。
    linearBarDom.resize()
  }
}

export function barUtils(id, name, Xdata, Ydata) {
  // 验证 这个 是否被创建了
  let linearBarDom = echarts.getInstanceByDom(id)
  if (linearBarDom == null) {
    linearBarDom = echarts.init(id)
  }
  linearBarDom.setOption({
    title: {
      text: name,
    },
    xAxis: {
      type: 'category',
      data: Xdata,
    },
    yAxis: {
      type: 'value',
    },
    tooltip: {},
    dataZoom: [
      // 这个是数据过多 就可以横线拉动
      {
        type: 'slider',
        show: true,
        start: 0,
        end: 50,
        xAxisIndex: [0],
      },
    ],
    series: [
      {
        data: Ydata,
        type: 'bar',
        // 这个是在柱状图中显示 数字
        label: {
          // 开启
          show: true,
          // 显示在上方
          position: 'top',
          //颜色
          color: 'black',
        },
      },
    ],
  })
  window.onresize = function () {
    //自适应大小, 不用的话不会自适应大小。
    linearBarDom.resize()
  }
}

// 重构柱状图
/**
 * 参数
 * @param {*} id 图渲染容器id
 * @param {*} name 图标题
 * @param {*} Xdata x轴数据
 * @param {*} Ydata y轴数据
 * @param {*} seriesName 图数据种类
 * @param {*} yAxisName y轴单位说明
 */
export function barUtilsOne(id, name, Xdata, Ydata, seriesName, yAxisName) {
  // 验证 这个 是否被创建了
  let linearBarDom = echarts.getInstanceByDom(id)
  if (linearBarDom == null) {
    linearBarDom = echarts.init(id)
  }

  if (seriesName.length < 0) {
    return
  }

  let series = []
  let gradientColor = getGradientColor(seriesName.length)

  for (let i = 0; i < seriesName.length; i++) {
    let arrColor = gradientColor[i]
    series.push({
      name: seriesName[i],
      type: 'bar',
      // stack: 'all',
      barMaxwidth: 35,
      barGap: '10%',
      color: {
        type: 'linear',
        x: 0,
        y: 1,
        colorStops: [
          {
            offset: 0,
            // color: '#6633ff',
            color: arrColor[0]
          },
          {
            offset: 0.5,
            // color: '#6699ff'
            color: arrColor[1]
          },
          {
            offset: 1,
            // color: '#66ffff'
            color: arrColor[2]
          }
        ]
      },
      label: {
        show: true,
        color: '#000000',
        position: 'top',
        formatter(p) {
          return p.value > 0 ? p.value : ''
        }
      },
      data: Ydata[i]
    })

  }

  linearBarDom.setOption({
    title: {
      text: name,
    },
    xAxis: {
      type: 'category',
      data: Xdata,
      axisLabel: {
        color: '#bb3137',
        fontSize: 16
      }
    },
    yAxis: {
      type: 'value',
      name: yAxisName,
      nameLocation: 'end',
    },
    legend: {
      data: seriesName,
      top: "0%"
    },
    tooltip: {},
    toolbox: {
      show: 1,
      itemSize: 30,
      x: 'right',
      y: 'top',
      feature: {
        saveAsImage: {
          show: true,
          title: '下载图片',
          type: 'png'
        }
      }
    },
    series: series,
  })
  window.onresize = function () {
    //自适应大小, 不用的话不会自适应大小。
    linearBarDom.resize()
  }
}

// 主题注册 也没有用到
export function echartsZhuTiZhuCe() {
  zhuTi.filter((item) => {
    echarts.registerTheme(item.zhuTiName, item)
  })
}

// 随机生成 颜色 这个占时没有用到
export function createColorCode(data) {
  var list = []
  for (let i = 0; i < data.length; i++) {
    let color = ''
    let r = Math.floor(Math.random() * 256)
    let g = Math.floor(Math.random() * 256)
    let b = Math.floor(Math.random() * 256)
    color = `rgb(${r},${g},${b})`
    list.push(color)
  }
  return list
}

function getGradientColor(num) {
  let arr = createGradientColor()
  let return_arr = []
  for (let i = 0; i < num; i++) {
    if (arr.length > 0) {
      let arrIndex = Math.floor(Math.random() * arr.length)
      return_arr[i] = arr[arrIndex]
      arr.splice(arrIndex, 1)
    } else {
      break
    }
  }
  return return_arr
}

function createGradientColor() {
  let list = []
  let a = ['#00C5CD', '#00E5EE', '#00F5FF']
  let b = ['#CD4F39', '#EE5C42', '#FF6347']
  let c = ['#6633FF', '#6699FF', '#66FFFF']
  let d = ['#1E90FF', '#63B8FF', '#00BFFF']
  let e = ['#BF3EFF', '#9B30FF', '#AB82FF']
  let f = ['#6A5ACD', '#7B68EE', '#8470FF']
  let g = ['#1E90FF', '#00BFFF', '#87CEFA']
  let h = ['#00CED1', '#48D1CC', '#40E0D0']
  let i = ['#00CD66', '#00FF7F', '#9AFF9A']
  let j = ['#9400D3', '#A020F0', '#BA55D3']
  list.push(a)
  list.push(b)
  list.push(c)
  list.push(d)
  list.push(e)
  list.push(f)
  list.push(g)
  list.push(h)
  list.push(i)
  list.push(j)
  return list
}

// unit：新增tip单位
export function barUtilsTwo(id, name, Xdata, Ydata, seriesName, yAxisName, unit) {
  // 验证 这个 是否被创建了
  let linearBarDom = echarts.getInstanceByDom(id)
  if (linearBarDom == null) {
    linearBarDom = echarts.init(id)
  }

  linearBarDom.setOption({
    title: {
      text: name,
      x: 'center',
      y: 'bottom',
      textAlign: 'left',
    },
    xAxis: {
      type: 'category',
      data: Xdata,
      axisLabel: {
        color: '#bb3137',
        fontSize: 16
      }
    },
    yAxis: {
      type: 'value',
      name: yAxisName,
      nameLocation: 'end',
      axisLabel: {
        show: true,
        interval: 0,
        formatter: function (value, index) {
          return value / 1000000
        }
      }
    },
    legend: {
      data: [
        {
          name: seriesName,
          icon: 'rect',
        }
      ],
      top: "0%"
    },
    tooltip: {
      trigger: 'axis',
      confine: true,
      formatter: function (param) {
        let relVal = param[0].name + '<br>'
        param.forEach((item, index) => {
          if (item.value && 'bar' == param[index].seriesType) {
            relVal += item.marker + ' ' + item.seriesName + ' : ' + item.value + unit + '</br>'
          } else if (item.value && 'line' == param[index].seriesType) {

          } else {
            relVal += item.marker + ' ' + item.seriesName + ' : - </br>'
          }
        })
        return relVal
      }

    },
    toolbox: {
      show: 1,
      itemSize: 24,
      x: 'right',
      y: 'top',
      feature: {
        saveAsImage: {
          show: true,
          title: '下载图片',
          type: 'png'
        }
      }
    },
    series: [
      {
        name: seriesName,
        type: 'bar',
        // stack: 'all',
        barMaxwidth: 35,
        barGap: '10%',
        color: {
          type: 'linear',
          x: 0,
          y: 1,
          colorStops: [
            {
              offset: 0,
              color: '#6633ff',
            },
            {
              offset: 0.35,
              color: '#6699ff'
            },
            {
              offset: 1,
              color: '#66ffff'
            }
          ]
        },
        label: {
          show: true,
          color: '#000000',
          position: 'top',
          formatter(p) {
            return (p.value / 1000000).toFixed(2)
          }
        },
        data: Ydata,
        emphasis: {
          itemStyle: {
            borderRadius: 30
          }
        },
        itemStyle: {
          borderRadius: [12, 12, 0, 0],
        }
      },
      {
        name: seriesName,
        type: 'line',
        data: Ydata,
        smooth: true,
        symbol: 'circle',
        symbolSize: 1,
        itemStyle: {
          lineStyle: {
            with: 3,
            color: '#27dba0'
          }
        },
        emphasis: {
          itemStyle: {
            color: '#4ccefe'
          }
        }
      }
    ]
  })
  window.onresize = function () {
    //自适应大小, 不用的话不会自适应大小。
    linearBarDom.resize()
  }
}

/**
 * 柱状图动态显示排名
 * @param {*} id 
 * @param {*} name 主题
 * @param {*} months 月份
 * @param {*} data 数据
 * @param {*} num 排名前几
 * @param {*} unit 单位
 */
export function barUtilsThree(id, name, months, data, num, unit) {

  let updateFrequency = 5000
  let dimension = 0
  // 预置柱状图颜色(35种)
  let barColors = [
    '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
    '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
    '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
    '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
    '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
  ]

  // 验证 这个 是否被创建了
  let linearBarDom = echarts.getInstanceByDom(id)

  if (linearBarDom == null) {
    linearBarDom = echarts.init(id)
  }

  let startIndex = 1
  let startMoth = months[startIndex]

  let option = {
    title: {
      text: name,
    },
    grid: {
      top: '15%',
      bottom: '10%',
      left: '10%',
      right: '10%',
      containLabel: true
    },
    xAxis: {
      max: 'dataMax',
      type: 'value',
      axisLabel: {
        formatter: function (n) {
          return Math.round(n) + unit
        }
      },
      axisLine: {
        show: true,
        interval: 24,
        lineStyle: {
          color: '#000',
        }
      },
    },
    dataset: {
      source: data.filter(function (d) {
        return d[2] === startMoth;
      })
    },
    yAxis: {
      type: 'category',
      inverse: true,
      max: num,
      axisLabel: {
        show: true,
        fontSize: 15,
        formatter: function (value) {
          return value
        },
      },
      animationDuration: 300,
      animationDurationUpdate: 300,
    },
    series: [
      {
        realtimeSort: true,
        seriesLayoutBy: 'column',
        type: 'bar',
        itemStyle: {
          color: function (param) {
            return barColors[param.dataIndex] || '#5470C6'
          }
        },
        encode: {
          x: dimension,
          y: 3
        },
        // 这个是在柱状图中显示 数字
        label: {
          show: true,
          position: 'right',
          formatter: function (value) {
            return Math.ceil(value.value[0]) + unit
          },
          fontSize: 16,
          precision: 1,
          fontFamily: 'monospace',
          valueAnimation: true
        },
      },
    ],
    animationDuration: 0,
    animationDurationUpdate: updateFrequency,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear',
    graphic: {
      elements: [
        {
          type: 'text',
          right: '10%',
          bottom: '15%',
          style: {
            text: startMoth,
            font: 'bolder 80px monospace',
            fill: 'rgba(100, 100, 100, 0.25)'
          },
          z: 100
        }
      ]
    }
  }

  linearBarDom.setOption(option)

  window.addEventListener("resize", function () {
    linearBarDom.resize();
  })

  for (var i = startIndex; i < months.length - 1; ++i) {
    (function (i) {
      setTimeout(function () {
        updateMonth(linearBarDom, option, data, months[i + 1]);
      }, (i - startIndex) * updateFrequency)
    })(i);
  }

  //option && linearBarDom.setOption(option)

}

function updateMonth(myChart, option, data, month) {

  let source = data.filter(function (d) {
    return d[2] === month
  })

  option.series[0].data = source
  option.graphic.elements[0].style.text = month
  myChart.setOption(option, true)
  window.addEventListener("resize", function () {
    myChart.resize();
  })
}

// 树状图
export function treeChartRoot(id, name, data, nodes) {
  let linearBarDom = echarts.getInstanceByDom(id)

  if (linearBarDom == null) {
    linearBarDom = echarts.init(id)
  }

  // 解决重新加载树会残留上次数据线条的问题
  if (linearBarDom != null) {
    linearBarDom.setOption({}, true)
  }

  let option;

  option = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    series: [
      {
        type: 'tree',
        id: 0,
        name: name,
        data: [data],
        top: '2%',
        left: '8%',
        bottom: '2%',
        right: '20%',
        layout: 'orthogonal',
        orient: 'LR',
        symbol: 'emptyCircle', // emptyCircle
        symbolSize: 7,
        edgeShape: 'polyline',
        edgeForkPosition: '63%',
        initialTreeDepth: 3,
        lineStyle: {
          width: 2
        },
        label: {
          backgroundColor: '#fff',
          position: 'left',
          verticalAlign: 'middle',
          align: 'right',
          formatter: function (params) {
            let flag = false
            for (let i = 0; i < nodes.length; i++) {
              if (nodes[i] != '' && params.name.match(nodes[i])) {
                flag = true
              }
            }

            if (flag) {
              return '{a|' + params.name + ': ' + params.value + '}'
            } else {
              return params.name + ': ' + params.value
            }
          },
          rich: {
            a: {
              color: 'red',
              backgroundColor: 'yellow'
            }
          }
        },
        leaves: {
          label: {
            position: 'right',
            verticalAlign: 'middle',
            align: 'left'
          }
        },
        emphasis: {
          focus: 'descendant'
        },
        expandAndCollapse: true,
        animationDuration: 550,
        animationDurationUpdate: 750
      }
    ]
  }

  //linearBarDom.clear()
  option && linearBarDom.setOption(option, true)

  linearBarDom.on('click', function (param) {
    if (param.data.collapsed === false) {
      param.data.collapsed = true
    } else {
      param.data.collapsed = false
    }
    callChangeCollapsed(linearBarDom, param, option)

  })

  window.addEventListener("resize", function () {
    linearBarDom.resize();
  })

}

function callChangeCollapsed(charts, param, option) {

  for (let i = 0; i < option.series[0].data[0].children.length; i++) {
    if (option.series[0].data[0].children[i].id === param.data.id && option.series[0].data[0].children[i].pid === param.data.pid) {
      if (option.series[0].data[0].children[i].collapsed != param.data.collapsed) {
        option.series[0].data[0].children[i].collapsed = param.data.collapsed
        charts.setOption({}, true)
        charts.setOption(option, true)
      } else {
        if (option.series[0].data[0].children[i].collapsed === false) {
          option.series[0].data[0].children[i].collapsed = true
        } else {
          option.series[0].data[0].children[i].collapsed = false
        }
        charts.setOption({}, true)
        charts.setOption(option, true)
      }
      return
    } else {
      if (option.series[0].data[0].children[i].children) {
        for (let j = 0; j < option.series[0].data[0].children[i].children.length; j++) {
          if (option.series[0].data[0].children[i].children[j].id === param.data.id && option.series[0].data[0].children[i].children[j].pid === param.data.pid) {
            if (option.series[0].data[0].children[i].children[j].collapsed != param.data.collapsed) {
              option.series[0].data[0].children[i].children[j].collapsed = param.data.collapsed
              charts.setOption({}, true)
              charts.setOption(option, true)
            } else {
              if (option.series[0].data[0].children[i].children[j].collapsed === false) {
                option.series[0].data[0].children[i].children[j].collapsed = true
              } else {
                option.series[0].data[0].children[i].children[j].collapsed = false
              }
              charts.setOption({}, true)
              charts.setOption(option, true)
            }
            return
          }
        }
      }
    }
  }

}