简单封装echarts函数，饼形图，地图，柱状图，折线图.。。。

最新推荐文章于 2024-11-14 04:20:07 发布

test45656

最新推荐文章于 2024-11-14 04:20:07 发布

阅读量489

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_45465689/article/details/107201962

版权

简单封装echarts函数

在这里插入图片描述
柱状图

// 柱状图
/**
 *  传入的参数
 *       cloum: {
        titleText: '业务操作量', // 标题名字
        xArray: ['1', '2', '3', '4', '5', '6', ''], // x轴得数据
        seriesInfo: [
          {
            name: '1',
            type: 'bar',
            data: [20, 34, 61, 75, 87, 60], // 总量柱体得数据
            barWidth: 14, //柱子宽度
            barGap: 1, //柱子之间间距
            color: '#00FFFF'
          },
          {
            name: '22',
            type: 'bar',
            data: [50, 70, 60, 61, 75, 87],
            barWidth: 14,
            barGap: 1,
            color: '#FF9000'
          }
        ]
      }
 */
function initEcharts(cloum) {
  const option = {
    title: {
      text: cloum.titleText,
      top: '20px',
      left: '22px',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      align: 'right',
      top: 21,
      left: 150,
      textStyle: {
        color: '#fff'
      },
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 35
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      // 是否显示刻度
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: cloum.xArray, //x轴数据
      axisLine: {
        show: true,
        lineStyle: {
          color: '#063374',
          width: 1,
          type: 'solid'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      }
    }],
    yAxis: [
      {
        // name: "(万件)",
        max: '140',
        splitNumber: 7,
        type: 'value',
        axisLabel: {
          formatter: '{value}',
          showMaxLabel: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          symbol: ['none', 'arrow'],
          show: true,
          lineStyle: {
            color: '#00c7ff',
            width: 1,
            type: 'solid'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#063374',
            type: 'dashed'
          }
        }
      }
    ],
    series: cloum.seriesInfo
  }
  return option
}
export default initEcharts

在这里插入图片描述
饼状环形图

//饼状环形图
/**
 * 传入的参数
 * 
 *       pie: {
        titleText: '用户排行', // 标题
        data: [{ // 循环的数据
          'name': '北京',
          'value': 5600
        }, {
          'name': '上海',
          'value': 3600
        }, {
          'name': '广州',
          'value': 1500
        }, {
          'name': '深圳',
          'value': 2000
        }, {
          'name': '未知',
          'value': 899
        }, {
          'name': '海外',
          'value': 4000
        }]
      }
 */
function initEcharts(pie) {
  const option = {
    title: {
      text: pie.titleText, // 标题
      color: '#000'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['24%', '45%'],
      clockwise: true,
      avoidLabelOverlap: true,
      hoverOffset: 15,
      itemStyle: {
        normal: {
          color: function(params) {
            const colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
            return colorList[params.dataIndex]
          }
        }
      },
      label: {
        show: true,
        position: 'outside',
        formatter: '{a|{b}：{d}%}\n{hr|}',
        rich: {
          hr: {
            backgroundColor: 't',
            borderRadius: 3,
            width: 3,
            height: 3,
            padding: [3, 3, 0, -12]
          },
          a: {
            padding: [-30, 15, -20, 15]
          }
        }
      },
      labelLine: { // 线条的长度
        normal: {
          length: 20,
          length2: 30,
          lineStyle: {
            width: 1
          }
        }
      },
      data: pie.data // 循环的数据
    }]
  }
  return option

}
export default initEcharts

在这里插入图片描述
map中国地图


// china地图图表 
/**
 * 传入的参数
 *       map: {
        text: '主标题', // 标题
        subtext: '副标题',
        data: [ // 发光的数据
          { name: '宜昌', value: [111.3, 30.7, 330] },
          { name: '信阳', value: [114.089435, 32.167686, 440] }, //经度 纬度 圆圈大小
          { name: '北京', value: [116.422586, 39.921549, 560] },
          { name: '徐州', value: [117, 34.5, 660] }

        ]
      }
 */
function initEcharts(map) {
  const option = {
    backgroundColor: '#fff',
    title: {
      text: map.text || '主标题', // 标题
      subtext: map.subtext || '副标题',
      left: 'center'
    },
    //地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
    //要显示散点图，必须填写这个配置
    geo: {
      show: true,
      roam: true, //是否允许鼠标滚动放大，缩小
      map: 'china', // 引入china地图
      label: { //图形上的文本标签，可用于说明图形的一些数据信息
        show: true, //是否显示文本
        color: '#CCC' //文本颜色
      },
      itemStyle: { //地图区域的多边形 图形样式。 默认样试。
        areaColor: '#0C81FE', //地图区域的颜色。
        borderColor: '#111' //边框线
      },
      emphasis: { //高亮状态下的多边形和标签样式。
        label: { //文本
          color: '#ADA'
        },
        itemStyle: { //区域
          areaColor: '#F60'
        }
      }
    },
    tooltip: { // 显示文字信息
      show: true
    },
    // 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
    visualMap: {
      min: 0, //最小值
      max: 600, //最大值
      calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
      inRange: {
        color: ['#e83e5e', '#73DDFF', '#d6f628', '#fb2a08'] //颜色由低到高排列
      },
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        type: 'effectScatter', //样试
        coordinateSystem: 'geo', //该系列使用的坐标系
        data: map.data, // 发亮的数据
        itemStyle: { //样试。
          normal: { //默认样试
            color: '#d6f628'
          }
        },
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            show: true
          }
        },
        //标记的大小,可以设置数组或者函数返回值的形式
        symbolSize: function(val) { //发光圆圈的大小
          return val[2] / 25
        },
        rippleEffect: { //涟漪特效相关配置。
          brushType: 'stroke' //波纹的绘制方式
        },
        hoverAnimation: true //鼠标移入放大圆
      }
    ]
  }
  return option
}
export default initEcharts

在这里插入图片描述
折线图

//折线图
//折线图图表 大屏展示页面
/**
 * 传入的参数
 *       line: {
        titleText: '1', // 标题
        legendArray: ['邮件营销', '联盟广告', '视频广告'], // 图例数据
        xArray: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // x轴数据
        seriesArray: [ // 循环的数据
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210],
            color: '#73DDFF'
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310],
            color: '#FDB36A'
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410],
            color: '#9E87FF'
          }
        ]
      }
 */
function initEcharts(line) {
  const option = {
    // 折线图数据
    title: {
      text: line.titleText // 标题
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: line.legendArray // 图例数据
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: line.xArray // x轴数据
    },
    yAxis: {
      type: 'value'
    },
    series: line.seriesArray // 循环添加数据
  }
  return option
}
export default initEcharts