vue echarts封装折线图

1.main.js
// 引入echarts
import * as echarts from 'echarts'
2.line.js
// 我是折线图
const echarts = require('echarts/lib/echarts')

require('echarts/lib/chart/line')
// import 'zrender/lib/svg/svg'
export function drawChartHistogram(param, element) {
  const myChart = echarts.init(element)
  //   配置项
  const pzx = {
    // 图例
    legend: {
      data: param.legend.data ? param.legend.data : [], // 图例的值 示例： ['星期一', '星期二']
      show: param.legend.show ? param.legend.show : false, // 控制图例显示
      bottom: param.legend.bottom || param.legend.bottom === 0 || param.legend.bottom === '0' ? param.legend.bottom : '', // 控制图例底部如果图例在底部这个参数为0
      right: param.legend.right || param.legend.right === 0 || param.legend.right === '0' ? param.legend.right : '', // 控制图例右部如果图例在右部这个参数为0
      top: param.legend.top || param.legend.top === 0 || param.legend.top === '0' ? param.legend.top : '', // 控制图例顶部部如果图例在顶部这个参数为0
      left: param.legend.left || param.legend.left === 0 || param.legend.left === '0' ? param.legend.left : '', // 控制图例右部如果图例在右部这个参数为0
      type: 'scroll'
    },
    grid: {
      containLabel: true,
      bottom: param.grid.bottom || param.grid.bottom === 0 || param.grid.bottom === '0' ? param.grid.bottom : '', // 控制图例底部如果图例在底部这个参数为0
      right: param.grid.right || param.grid.right === 0 || param.grid.right === '0' ? param.grid.right : '', // 控制图例右部如果图例在右部这个参数为0
      top: param.grid.top || param.grid.top === 0 || param.grid.top === '0' ? param.grid.top : '', // 控制图例顶部部如果图例在顶部这个参数为0
      left: param.grid.left || param.grid.left === 0 || param.grid.left === '0' ? param.grid.left : '' // 控制图例右部如果图例在右部这个参数为0
    },
    // y轴 这边暂时按照1个y轴配置
    yAxis: {
      type: 'value',
      show: param.yAxis.show ? param.yAxis.show : false,
      name: param.yAxis.name ? param.yAxis.name : '',
      nameLocation: param.yAxis.nameLocation ? param.yAxis.nameLocation : 'end', // y轴的name位置start,middle,end
      axisLine: {
        show: param.yAxis.axisLine ? (param.yAxis.axisLine.show ? param.yAxis.axisLine.show : true) : true,
        lineStyle: {
          color: param.yAxis.axisLine ? (param.yAxis.axisLine.color ? param.yAxis.axisLine.color : '#CCCCCC') : '#CCCCCC', // y轴线条颜色支持渐变色
          type: param.yAxis.axisLine ? (param.yAxis.axisLine.type ? param.yAxis.axisLine.type : 'solid') : 'solid' // 线条类型，默认solid,'dashed','dotted'
        }
      },
      axisLabel: {
        inside: false,
        color: '#333333'
      },
      splitLine: {
        show: param.yAxis.splitLine ? (param.yAxis.splitLine.show ? param.yAxis.splitLine.show : false) : false,
        lineStyle: {
          type: param.yAxis.splitLine ? (param.yAxis.splitLine.type ? param.yAxis.splitLine.type : 'dashed') : 'dashed'
        }
      }
    },
    // x轴
    xAxis: {
      type: 'category',
      data: param.xAxis.data,
      show: param.xAxis.show ? param.xAxis.show : true,
      position: param.xAxis.position ? param.xAxis.position : 'bottom', // x轴位置 top,bottom
      name: param.xAxis.name ? param.xAxis.name : '', // x轴名称
      nameTextStyle: {
        color: param.xAxis.nameTextStyle ? (param.xAxis.nameTextStyle.color ? param.xAxis.nameTextStyle.color : '#333333') : '#333333', // x轴的字体颜色
        fontSize: param.xAxis.nameTextStyle ? (param.xAxis.nameTextStyle.fontSize ? param.xAxis.nameTextStyle.fontSize : '12') : '12' // x轴的字体大小
      },
      axisLine: {
        show: param.xAxis.axisLine ? (param.xAxis.axisLine.show ? param.xAxis.axisLine.show : true) : true,
        lineStyle: {
          color: param.xAxis.axisLine ? (param.xAxis.axisLine.color ? param.xAxis.axisLine.color : '#CCCCCC') : '#CCCCCC', // y轴线条颜色支持渐变色
          type: param.xAxis.axisLine ? (param.xAxis.axisLine.type ? param.xAxis.axisLine.type : 'solid') : 'solid' // 线条类型，默认solid,'dashed','dotted'
        }
      },
      axisTick: {
        // 刻度相关
        show: param.xAxis.axisTick ? (param.xAxis.axisTick.show ? param.xAxis.axisTick.show : true) : true,
        alignWithLabel: param.xAxis.axisTick ? (param.xAxis.axisTick.alignWithLabel ? param.xAxis.axisTick.alignWithLabel : false) : false
      },
      axisLabel: {
        inside: false,
        color: '#333333'
      },
      splitLine: {
        show: param.xAxis.splitLine ? (param.xAxis.splitLine.show ? param.xAxis.splitLine.show : false) : false,
        lineStyle: {
          type: param.xAxis.splitLine ? (param.xAxis.splitLine.type ? param.xAxis.splitLine.type : 'dashed') : 'dashed'
        }
      }
    },
    // series
    series: param.series ? param.series : [],
    // color
    color: param.color ? param.color : [],
    dataZoom: [
      {
        id: 'dataZoomX',
        type: 'inside',
        xAxisIndex: [0],
        end: param.dataZoom.end ? param.dataZoom.end : 100,
        filterMode: 'filter'
      }
    ],
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    }
  }
  if (pzx.color.length === 0) {
    delete pzx.color
  }
  if (!pzx.legend.right && pzx.legend.right !== 0 && pzx.legend.right !== '0') {
    delete pzx.legend.right
  }
  if (!pzx.legend.left && pzx.legend.left !== 0 && pzx.legend.left !== '0') {
    delete pzx.legend.left
  }
  if (!pzx.legend.top && pzx.legend.top !== 0 && pzx.legend.top !== '0') {
    delete pzx.legend.top
  }
  if (!pzx.legend.bottom && pzx.legend.bottom !== 0 && pzx.legend.bottom !== '0') {
    delete pzx.legend.bottom
  }
  if (!pzx.grid.right && pzx.grid.right !== 0 && pzx.grid.right !== '0') {
    delete pzx.grid.right
  }
  if (!pzx.grid.left && pzx.grid.left !== 0 && pzx.grid.left !== '0') {
    delete pzx.grid.left
  }
  if (!pzx.grid.top && pzx.grid.top !== 0 && pzx.grid.top !== '0') {
    delete pzx.grid.top
  }
  if (!pzx.grid.bottom && pzx.grid.bottom !== 0 && pzx.grid.bottom !== '0') {
    delete pzx.grid.bottom
  }
  myChart.setOption(pzx)
  return myChart
}
3.封装组件
<template>
  <div class="daily-record-echarts">
    <div ref="dateCharts" class="chart" />
  </div>
</template>
<script>
import { drawChartHistogram } from '@/utils/echartsAll/line'
import 'zrender/lib/svg/svg'
export default {
  name: 'DailyRecordEcharts',
  props: {
    tableArray: {
      type: Object,
      default: () => {
        return {
          legend: {
            data: [], // 图例的值 示例： ['星期一', '星期二']  // -----这个是必须的
            show: true, // 控制图例显示
            bottom: '', // 控制图例底部如果图例在底部这个参数为0
            right: '', // 控制图例右部如果图例在右部这个参数为0
            top: '', // 控制图例顶部部如果图例在顶部这个参数为0
            left: '' // 控制图例右部如果图例在右部这个参数为0
          },
          // y轴 这边暂时按照1个y轴配置
          yAxis: {
            type: 'value',
            show: false,
            name: '',
            nameLocation: 'end', // y轴的name位置start,middle,end
            axisLine: {
              show: false,
              color: '#CCCCCC', // y轴线条颜色支持渐变色
              type: 'solid' // 线条类型，默认solid,'dashed','dotted'
            }
          },
          // x轴
          xAxis: {
            type: 'category',
            data: [], // -----这个是必须的
            show: true,
            position: 'bottom', // x轴位置 top,bottom
            name: '', // x轴名称
            nameTextStyle: {
              color: '#333333', // x轴的字体颜色
              fontSize: '12' // x轴的字体大小
            },
            axisLine: {
              show: true,
              color: '#CCCCCC', // y轴线条颜色支持渐变色
              type: 'solid' // 线条类型，默认solid,'dashed','dotted'
            },
            axisTick: {
              // 刻度相关
              show: true,
              alignWithLabel: true
            }
          },
          grid: {
            top: '',
            left: '',
            bottom: '',
            right: ''
          },
          color: [],
          dataZoom: {},
          series: []
        }
      }
    }
  },
  data() {
    return {
      mycharts: null
    }
  },
  watch: {
    tableArray: {
      handler(newName, oldName) {
        this.getChart(newName)
      },
      deep: true
    }
  },
  beforeDestroy() {
    // ----------这个是用来释放图表
    const dcharts = this.$echarts.getInstanceByDom(this.$refs.dateCharts)
    if (dcharts) {
      this.$echarts.dispose(dcharts)
      // 这是调用ie内存回收
      if (window.CollectGarbage) {
        window.CollectGarbage()
      }
    }

    /** ****自动适应缩放模块******/
    window.removeEventListener('resize', this.resizefun)
    this.resizefun = null
  },
  mounted() {
    this.getChart(this.tableArray)
    /** ****自动适应缩放模块******/
    this.resizefun = () => {
      if (this.mycharts) {
        // 防止重复性渲染
        this.mycharts.resize()
      } else {
        this.$echarts.init(this.$refs.dateCharts).resize()
      }
    }
    window.addEventListener('resize', this.resizefun)
  },
  methods: {
    getChart(val) {
      const dcharts = this.$echarts.getInstanceByDom(this.$refs.dateCharts)
      if (dcharts) {
        this.$echarts.dispose(dcharts)
        // 这是调用ie内存回收
        if (window.CollectGarbage) {
          window.CollectGarbage()
        }
      }
      this.mycharts = drawChartHistogram(val, this.$refs.dateCharts)
    }
  }
}
</script>
<style scoped lang="scss" type="text/scss">
.daily-record-echarts{
  width:100%;
  height:100%;
  .chart{
      width:100%;
      height:100%;
  }
}
</style>

4.使用
const echartsOptions = {
  legend: {
    data: [], // 图例的值 示例： ['星期一', '星期二']  // -----这个是必须的
    show: true, // 控制图例显示
    bottom: '', // 控制图例底部如果图例在底部这个参数为0
    right: '0', // 控制图例右部如果图例在右部这个参数为0
    top: '0', // 控制图例顶部部如果图例在顶部这个参数为0
    left: '' // 控制图例右部如果图例在右部这个参数为0
  },
  // y轴 这边暂时按照1个y轴配置
  yAxis: {
    type: 'value',
    show: true,
    name: '',
    nameLocation: 'end', // y轴的name位置start,middle,end
    axisLine: {
      show: false,
      color: '#ffffff', // y轴线条颜色支持渐变色
      type: 'solid' // 线条类型，默认solid,'dashed','dotted'
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  // x轴
  xAxis: {
    type: 'category',
    data: [], // -----这个是必须的
    show: true,
    position: 'bottom', // x轴位置 top,bottom
    name: '', // x轴名称
    nameTextStyle: {
      color: '#333333', // x轴的字体颜色
      fontSize: '12' // x轴的字体大小
    },
    axisLine: {
      show: true,
      color: '#CCCCCC', // y轴线条颜色支持渐变色
      type: 'solid' // 线条类型，默认solid,'dashed','dotted'
    },
    axisTick: {
      // 刻度相关
      show: true,
      alignWithLabel: true
    }
  },
  color: [],
  dataZoom: {
    end: 100
  },
  grid: {
    left: 'left',
    bottom: 10,
    right: 0,
    top: 30
  },
  series: []
}
<s-echart v-loading="loadingEcharts" :table-array="tableArray" style="height:362px;margin-top:50px" />
this.tableArray = JSON.parse(JSON.stringify(echartsOptions))
原文链接：https://blog.csdn.net/weixin_42388872/article/details/125067444
你可能也喜欢
