vue中封装echart

落日映苍穹つ 2021-07-26 12:43 501阅读 0赞

**以下是模板 ，不同的echart需要替换option中的内容**

**LineChart.vue**

<template>
      <div :class="className" :style="{height:height,width:width}" />
    </template>
    
    <script>
    import echarts from 'echarts'
    require('echarts/theme/macarons') // echarts theme
    import resize from './mixins/resize'
    
    export default {
      mixins: [resize],
      props: {
        className: {
          type: String,
          default: 'chart'
        },
        width: {
          type: String,
          default: '100%'
        },
        height: {
          type: String,
          default: '350px'
        },
        autoResize: {
          type: Boolean,
          default: true
        },
        chartData: {
          type: Object,
          required: true
        }
      },
      data() {
        return {
          chart: null
        }
      },
      watch: {
        chartData: {
          deep: true,
          handler(val) {
            this.setOptions(val)
          }
        }
      },
      mounted() {
        this.$nextTick(() => {
          this.initChart()
        })
      },
      beforeDestroy() {
        if (!this.chart) {
          return
        }
        this.chart.dispose()
        this.chart = null
      },
      methods: {
        initChart() {
          this.chart = echarts.init(this.$el, 'macarons')
          this.setOptions(this.chartData)
        },
        setOptions({ expectedData, actualData } = {}) {
          this.chart.setOption({
            xAxis: {
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              boundaryGap: false,
              axisTick: {
                show: false
              }
            },
            grid: {
              left: 10,
              right: 10,
              bottom: 20,
              top: 30,
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              },
              padding: [5, 10]
            },
            yAxis: {
              axisTick: {
                show: false
              }
            },
            legend: {
              data: ['expected', 'actual']
            },
            series: [{
              name: 'expected', itemStyle: {
                normal: {
                  color: '#FF005A',
                  lineStyle: {
                    color: '#FF005A',
                    width: 2
                  }
                }
              },
              smooth: true,
              type: 'line',
              data: expectedData,
              animationDuration: 2800,
              animationEasing: 'cubicInOut'
            },
            {
              name: 'actual',
              smooth: true,
              type: 'line',
              itemStyle: {
                normal: {
                  color: '#3888fa',
                  lineStyle: {
                    color: '#3888fa',
                    width: 2
                  },
                  areaStyle: {
                    color: '#f3f8ff'
                  }
                }
              },
              data: actualData,
              animationDuration: 2800,
              animationEasing: 'quadraticOut'
            }]
          })
        }
      }
    }
    </script>

**使用，通过自定义组件给封装好的echart组件赋值**

<template>
      <div class="dashboard-editor-container">
        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
          <line-chart :chart-data="lineChartData" />
        </el-row>  
      </div>
    </template>
    
    <script>
    import LineChart from './dashboard/LineChart'
    
    const lineChartData = {
      newVisitis: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145]
      }
    }
    
    export default {
      name: 'Index',
      components: {
        LineChart
      },
      data() {
        return {
          lineChartData: lineChartData.newVisitis
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .dashboard-editor-container {
      padding: 32px;
      background-color: rgb(240, 242, 245);
      position: relative;
    
      .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
      }
    }
    
    @media (max-width:1024px) {
      .chart-wrapper {
        padding: 8px;
      }
    }
    </style>