【知识分享】Echarts折线图封装成组件

封装思路：

1.定义个组件，在里面对折线图的代码进行封装

2.将想要动态传入的参数进行抽取

3.在其他页面传入相关的参数，直接展示出图标

具体代码：

1.封装的组件的页面代码

<template>

  <div class="index_card" :style="{ height: chartHeight, width: chartWidth }">

    <Echart :options="options" :id="chartId" class="echarts_bottom"></Echart>

  </div>

</template>

<script>

import * as echarts from 'echarts'

export default {

  props: {

    firstData: {

      type: Array,

      default: []

    },

    secondData: {

      type: Array,

      default: []

    },

    xAxisData: {

      type: Array,

      default: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']

    },

    legendData: {

      type: Array,

      default: []

    },

    chartHeight: {

      type: String,

      default: '300px' // 默认高度为 400px

    },

    chartWidth: {

      type: String,

      default: '100%' // 默认高度为 400px

    },

    name: {

      type: String,

      default: ''

    },

    xAxisTickShow: {

      type: Boolean,

      default: false

    },

    yAxisTickShow: {

      type: Boolean,

      default: false

    },

    ySplitLineShow: {

      type: Boolean,

      default: false

    },

    xAxisLineShow: {

      type: Boolean,

      default: false

    },

    yAxisLineShow: {

      type: Boolean,

      default: false

    },

    splitLine: {

      type: Boolean,

      default: true

    },

    seriesSmonth: {

      type: Boolean,

      default: true

    },

    legendtextStylecolor: {

      type: String,

      default: '#fff'

    }

  },

  watch: {

    firstData(newCount, oldCount) {

      this.init()

    },

    secondData(newCount, oldCount) {

      this.init()

    }

  },

  data() {

    return {

      options: {},

      chartId: `chart_${Math.random().toString(36).substr(2, 9)}`

    }

  },

  mounted() {

    this.init()

  },

  methods: {

    init() {

      let chart = echarts.init(document.getElementById(this.chartId))

      this.options = {

        tooltip: {

          trigger: 'axis'

        },

        grid: {

          left: '3%',

          right: '4%',

          bottom: '3%',

          top: 60,

          containLabel: true

        },

        legend: {

          icon: 'rect',

          right: '6%',

          top: 12,

          itemWidth: 18,

          itemHeight: 6,

          itemGap: 20,

          data: this.legendData,

          textStyle: {

            color: this.legendtextStylecolor

          }

        },

        xAxis: {

          type: 'category',

          data: this.xAxisData,

          axisLabel: {

            //坐标轴字体颜色

            textStyle: {

              color: this.legendtextStylecolor

            }

          },

          axisLine: {

            lineStyle: {

              color: '#e5e5e5'

            }

          },

          axisTick: {

            //y轴刻度线

            show: this.xAxisTickShow

          },

          splitLine: {

            //网格

            show: this.xSplitLineShow

          },

          boundaryGap: false

        },

        yAxis: {

          type: 'value',

          name: this.name,

          axisLabel: {

            //坐标轴字体颜色

            margin: -8, // 将刻度标签向左偏移

            textStyle: {

              color: this.legendtextStylecolor

            }

          },

          offset: 12,

          axisLine: {

            show: this.yAxisLineShow

          },

          axisTick: {

            //y轴刻度线

            show: this.yAxisTickShow

          },

          splitLine: {

            //网格

            show: this.splitLine,

            lineStyle: {

              color: 'rgba(211, 237, 255, 0.3)',

              type: 'dashed'

            }

          }

        },

        series: [

          {

            name: this.legendData[0],

            type: 'line',

            smooth: this.seriesSmonth,

            symbol: 'circle',

            symbolSize: 0,

            itemStyle: {

              color: 'rgb(199, 164, 61)'

              // borderColor: "#fff",

              // borderWidth: 2,

              // shadowColor: "rgba(0, 0, 0, .3)",

            },

            lineStyle: {

              normal: {

                color: 'rgb(199, 164, 61)',

                shadowColor: 'rgba(199, 164, 61, .4)',

                shadowBlur: 8,

                shadowOffsetY: 10,

                shadowOffsetX: 0

              }

            },

            areaStyle: {

              normal: {

                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                  {

                    offset: 0,

                    color: 'rgba(199, 164, 61, .4)'

                  },

                  {

                    offset: 1,

                    color: 'rgba(199, 164, 61, 0)'

                  }

                ])

              }

            },

            data: this.firstData

          },

          {

            name: this.legendData[1],

            type: 'line',

            smooth: this.seriesSmonth,

            // symbol: "circle",

            symbolSize: 0,

            itemStyle: {

              color: 'rgb(34, 129, 205)'

              // borderColor: "#fff",

              // borderWidth: 1,

            },

            lineStyle: {

              normal: {

                color: 'rgb(34, 129, 205)',

                shadowColor: 'rgba(34, 129, 205, .4)',

                shadowBlur: 8,

                shadowOffsetY: 10,

                shadowOffsetX: 0

              }

            },

            areaStyle: {

              normal: {

                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                  {

                    offset: 0,

                    color: 'rgba(34, 129, 205, .4)'

                  },

                  {

                    offset: 1,

                    color: 'rgba(34, 129, 205, 0)'

                  }

                ])

              }

            },

            data: this.secondData

          }

        ]

      }

    }

  }

}

</script>

2.组件使用

<PieChart

    :firstData="[15, 11, 19, 13, 15, 11, 19, 13, 19, 13, 13, 13]"

    :legendData="['出站']"

    :name="'Nm³/h'"

    :legendtextStylecolor="'#9eaaba'"

    :chartWidth="'500px'"

  />

注意：具体时候时候可以将动态从数据库查询到的数据结果替换到里面去