sisweb/src/tools/echartsTool.js

import EC from 'echarts'
import eWordcloud from 'echarts-wordcloud'
import { message } from 'ant-design-vue';
const color = ["#00FFF0","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8cb25","#3dffb0","#e8a425","#ff7aab","#e84b1e","#552ce2","#ffae21","#e8861e","#d441ff","#35e8e4","#9c7aff","#e86fd8","#ffee38"];

/*
 *  获取 自浮云 - 常用1
 *  id: 元素ID
 *  data: [{
      name: "发动机卡了", // 值
      value: 100, // 权重
      textStyle: {
        emphasis: {
          color: 'red' // 光标移入颜色
        }
      }
    },{
      name: "发动了", // 值
      value: 20, // 权重
      textStyle: {
        emphasis: {
          color: 'red' // 光标移入颜色
        }
      }
    }]
 *  name: 提示框name
 * */
export function getWordCloud(id, data) {
  if(data === undefined){
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  let option = {
    tooltip: {},
    series: [{
      type: 'wordCloud',
      gridSize: 2,
      sizeRange: [12, 50],
      rotationRange: [-90, 90],
      shape: 'pentagon',
      width: 600,
      height: 400,
      drawOutOfBound: true,
      textStyle: {
        normal: {
          color: function() {
            return 'rgb(' + [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
            ].join(',') + ')';
          }
        },
        emphasis: {
          shadowBlur: 10,
          shadowColor: '#333'
        }
      },
      data: data
    }]
  };
  myChart.setOption(option, true);
}

/*
 *  获取 雷达图 - 常用1
 *  id: 元素ID
 *  horn: [
      { name: '销售', max: 6500},
      { name: '管理', max: 16000},
      { name: '信息技术', max: 30000},
      { name: '客服', max: 38000},
      { name: '研发', max: 52000}
    ]
 *  data: [
      {
        value: [4300, 10000, 28000, 35000, 50000],
        name: '完好率'
      }
    ]
 *  name: 提示框name
 * */
export function getRadar(id, horn, data, name) {
  if(name === undefined){
    name = "雷达数据";
  }
  if(data === undefined){
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  let option = {
    tooltip: {},
    radar: {
      // shape: 'circle',
      radius: "60%",
      indicator: horn,
      axisLine: {
        lineStyle: {
          color: "#FFF"
        }
      },
      splitLine: {
        lineStyle: {
          color: "#2aafb7"
        }
      }
    },
    series: [{
      name: name,
      type: 'radar',
      // areaStyle: {normal: {}},
      data: data
    }]
  };
  myChart.setOption(option, true);
}

/*
 *  获取 雷达图 - 常用2 - 百分比
 *  id: 元素ID
 *  horn: [
      { name: '销售', max: 100},
      { name: '管理', max: 100},
      { name: '信息技术', max: 100},
      { name: '客服', max: 100},
      { name: '研发', max: 100}
    ]
 *  data: [
      {
        value: [98, 98, 98, 98, 98],
        name: '完好率'
      }
    ]
 *  name: 提示框name
 * */
export function getRadar2(id, horn, data, name) {
  if(name === undefined){
    name = "雷达数据";
  }
  if(data === undefined){
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  let option = {
    tooltip: {
      // formatter: '{b0}<br />{a}: {c0}'
      formatter: function (params, ticket, callback) {
        let value = params.data.name;
        horn.forEach((item, i)=>{
          value += '<br />'+item.name+'：'+params.data.value[i]+"%"
        });
        return value;
      }
    },
    radar: {
      // shape: 'circle',
      radius: "60%",
      indicator: horn,
      axisLine: {
        lineStyle: {
          color: "#FFF"
        }
      },
      splitLine: {
        lineStyle: {
          color: "#2aafb7"
        }
      }
    },
    series: [{
      name: name,
      type: 'radar',
      // areaStyle: {normal: {}},
      data: data
    }]
  };
  myChart.setOption(option, true);
}

/*
 *  获取 柱状图 - 横向1
 *  id: 元素ID
 *  x: ['TOP6', 'TOP5', 'TOP4', 'TOP3', 'TOP2', 'TOP1']
 *  data: [{
      value: 1000,
      itemStyle: {
        color: "#AAFAE0",
        barBorderRadius: [0, 3, 3, 0] // 柱子圆角
      }
    },{
      value: 2000,
      itemStyle: {
        color: "#FCCDBA",
        barBorderRadius: [0, 3, 3, 0] // 柱子圆角
      }
    },{
      value: 3000,
      itemStyle: {
        color: "#015EEA",
        barBorderRadius: [0, 3, 3, 0] // 柱子圆角
      }
    }]
 *  name: 提示框name
 * */
export function getBarHorizontal(id, x, data, name, tipX) {
  if(name === undefined){
    name = "数量";
  }
  if(data === undefined){
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  let option = {
    tooltip: {
      // formatter: '{b0}<br />{a}: {c0}'
      formatter: function (params, ticket, callback) {
        if(tipX === undefined){
          return params.name+'<br />'+params.seriesName+': '+params.data.value;
        }else{
          return tipX[tipX.length - 1 - params.dataIndex]+'<br />'+params.seriesName+': '+params.data.value;
        }
      }
    },
    grid: {
      top: 10,
      left: 60,
      right: 40,
      bottom: 30,
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      minInterval: 1, // 刻度不出现小数
      axisLine: {
        lineStyle: {
          color: "#011A3F"
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 12,
        color: "#FFF"
      },
    },
    yAxis: {
      type: 'category',
      data: x,
      axisLine: {
        lineStyle: {
          color: "#011A3F"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 12,
        color: "#FFF"
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: name,
        type: 'bar',
        barWidth: 6,
        data: data
      }
    ]
  };
  myChart.setOption(option, true);
}
/*
 *  获取 柱状图 - 纵向1
 *  id: 元素ID
 *  x: ['TOP3', 'TOP2', 'TOP1']
 *  data: [{
      value: 1000,
      itemStyle: {
        color: "#AAFAE0",
        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
      }
    },{
      value: 2000,
      itemStyle: {
        color: "#FCCDBA",
        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
      }
    },{
      value: 3000,
      itemStyle: {
        color: "#015EEA",
        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
      }
    }]
 *  name: 提示框name
 * */
export function getBarVertical(id, x, data, name) {
  if(name === undefined){
    name = "数量";
  }
  if(data === undefined){
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: 15,
      left: 60,
      right: 40,
      bottom: 30,
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      minInterval: 1, // 刻度不出现小数
      axisLine: {
        lineStyle: {
          color: "#011A3F"
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 12,
        color: "#FFF",
        // 改变纵坐标的单位，过大的时候处理成万
        formatter: function (value, index) {
          if(value >= 10000){
            return (value/10000).toFixed(0)+"万";
          }else{
            return value;
          }
        }

      },
    },
    xAxis: {
      type: 'category',
      data: x,
      axisLine: {
        lineStyle: {
          color: "#011A3F"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 12,
        color: "#FFF"
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: name,
        type: 'bar',
        barWidth: 6,
        data: data
      }
    ]
  };
  myChart.setOption(option, true);
}
/*
 *  获取 柱状图 - 纵向2 - 一轴多线
 *  id: 元素ID
 *  x: ['分中心1', '分中心2', '分中心3', '分中心4']
 *
 *  data: [
      {
        name: '土建',
        type: 'bar',
        barWidth: 6,
        itemStyle: {
          color: "#4AB2EC",
          barBorderRadius: [3, 3, 0, 0] // 柱子圆角
        },
        data: [7.0, 23.2, 25.6, 76.7]
      },
      {
        name: '机电',
        type: 'bar',
        barWidth: 6,
        itemStyle: {
          color: "#F8CA9D",
          barBorderRadius: [3, 3, 0, 0] // 柱子圆角
        },
        data: [2.6, 5.9, 9.0, 26.4]
      },
      {
        name: '其他',
        type: 'bar',
        barWidth: 6,
        itemStyle: {
          color: "#8E6398",
          barBorderRadius: [3, 3, 0, 0] // 柱子圆角
        },
        data: [28.7, 70.7, 175.6, 182.2]
      },
    ]
 * */
export function getBarVertical2(id, x, data) {
  if(data === undefined){
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: 15,
      left: 60,
      right: 40,
      bottom: 30,
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLine: {
        lineStyle: {
          color: "#011A3F"
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 12,
        color: "#FFF",
        // 改变纵坐标的单位，过大的时候处理成万
        formatter: function (value, index) {
          if(value >= 10000){
            return (value/10000).toFixed(0)+"万";
          }else{
            return value;
          }
        }
      },
    },
    xAxis: {
      type: 'category',
      data: x,
      axisLine: {
        lineStyle: {
          color: "#011A3F"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 12,
        color: "#FFF"
      },
      splitLine: {
        show: false
      }
    },
    series: data
  };
  myChart.setOption(option, true);
}
/*
 *  获取 柱状图 - 纵向2_1 - 一轴多线百分比
 *  id: 元素ID
 *  x: ['分中心1', '分中心2', '分中心3', '分中心4']
 *
 *  data: [
      {
        name: '土建',
        type: 'bar',
        barWidth: 6,
        itemStyle: {
          color: "#4AB2EC",
          barBorderRadius: [3, 3, 0, 0] // 柱子圆角
        },
        data: [7.0, 23.2, 25.6, 76.7]
      },
      {
        name: '机电',
        type: 'bar',
        barWidth: 6,
        itemStyle: {
          color: "#F8CA9D",
          barBorderRadius: [3, 3, 0, 0] // 柱子圆角
        },
        data: [2.6, 5.9, 9.0, 26.4]
      },
      {
        name: '其他',
        type: 'bar',
        barWidth: 6,
        itemStyle: {
          color: "#8E6398",
          barBorderRadius: [3, 3, 0, 0] // 柱子圆角
        },
        data: [28.7, 70.7, 175.6, 182.2]
      },
    ]
 * */
export function getBarVertical2_1(id, x, data) {
  if(data === undefined){
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
    },
    grid: {
      top: 15,
      left: 60,
      right: 40,
      bottom: 30,
    },
    yAxis: {
      max: 100,
      type: 'value',
      boundaryGap: [0, 0.01],
      minInterval: 1, // 刻度不出现小数
      axisLine: {
        lineStyle: {
          color: "#011A3F"
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 12,
        color: "#FFF",
        formatter: '{value} %'
      },
    },
    xAxis: {
      type: 'category',
      data: x,
      axisLine: {
        lineStyle: {
          color: "#011A3F"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 12,
        color: "#FFF"
      },
      splitLine: {
        show: false
      }
    },
    series: data
  };
  myChart.setOption(option, true);
}
/*
 *  获取 柱状图 - 纵向3
 *  id: 元素ID
 *  x: ['TOP6', 'TOP5', 'TOP4', 'TOP3', 'TOP2', 'TOP1']
 *  data: [{
      value: 1000,
      itemStyle: {
        color: "#D8A0FE",
        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
      }
    },{
      value: 2000,
      itemStyle: {
        color: "#D8A0FE",
        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
      }
    },{
      value: 3000,
      itemStyle: {
        color: "#D8A0FE",
        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
      }
    },{
      value: 4000,
      itemStyle: {
        color: "#D8A0FE",
        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
      }
    },{
      value: 5000,
      itemStyle: {
        color: "#D8A0FE",
        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
      }
    },{
      value: 5999,
      itemStyle: {
        color: "#D8A0FE",
        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
      }
    },]
 * */
export function getBarVertical3(id, x, data, name) {
  if(name === undefined){
    name = "数量";
  }
  if(data === undefined){
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: 25,
      left: 80,
      right: 40,
      bottom: 30,
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      minInterval: 1, // 刻度不出现小数
      axisLine: {
        lineStyle: {
          color: "#011A3F"
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 12,
        color: "#FFF",
        // 改变纵坐标的单位，过大的时候处理成万
        formatter: function (value, index) {
          if(value >= 10000){
            return (value/10000).toFixed(0)+"万";
          }else{
            return value;
          }
        }
      },
    },
    xAxis: {
      type: 'category',
      data: x,
      axisLine: {
        lineStyle: {
          color: "#011A3F"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 12,
        color: "#FFF"
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: name,
        type: 'bar',
        barWidth: 6,
        data: data
      }
    ]
  };
  myChart.setOption(option, true);
}

/*
 *  获取 饼图 - 常用1
 *  id: 元素ID
 *  data: 饼图数据
 *  name: 提示框name
 *  [
      {value: 335, name: '直接访问'},
      {value: 310, name: '邮件营销'},
      {value: 234, name: '联盟广告'},
      {value: 135, name: '视频广告'},
      {value: 1548, name: '搜索引擎'}
    ]
 * */
export function getPie(id, data, name) {
  if(name === undefined){
    name = "占比";
  }
  if(data === undefined){
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  let option = {
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    grid: {
      left: 44,
      right: 25,
      top: 56,
      bottom: 40
    },
    color: color,
    series: [{
      name: name,
      type: 'pie',
      radius: ['45%', '65%'],
      center: ['50%', '50%'],
      data: data,
      labelLine: {
        length: 10,
        length2: 10,
        lineStyle: {
          color: "#FFF"
        }
      },
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        normal: {
          label: {
            textStyle: {
              color:'#FFF',
              fontSize: 14,
            }
          },
        },
      },
      label: {
        formatter: ['{b}','{d}%'].join('\n')
      }
    }]
  };
  myChart.setOption(option, true);
}


export default {
  getWordCloud,

  getRadar,
  getRadar2,

  getBarHorizontal,
  getBarVertical,
  getBarVertical2,
  getBarVertical2_1,
  getBarVertical3,

  getPie,

  color,
}