vue 封装echarts组件

1.components下新建chart.vue

<template>
  <div
    :class="className"
    :style="{ height: height, width: width }"
  />
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100px'
    },
    option: {
      type: Object,
      default () {
        return {};
      },
    },
  },
  data () {
    return {
      chart: null
    }
  },
  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()
    },
    setOptions () {
      this.chart.setOption(this.option)
    }
  }
}
</script>

2.引入传入

<template>
    <div>
          <chart
            :className='chart'
            :width="'284px'"
            :height="'207px'"
            :option="option"
          />
    </div>
</template>
<script>
import chart from '@/components/chart.vue'
export default {
      components: {  chart },
      data () {
        return {
            option: {
            series: [
          {
            type: 'gauge',
            center: ['50%', '75%'],
            radius: '132%',
            min: 0, //最小值
            max: 100, //最大值
            startAngle: 180, //仪表盘起始角度
            endAngle: 0, //仪表盘结束角度
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                width: 2,
                color: [
                  [1, 'rgba(54, 130, 225,0.2)'],
                ],
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
          },
          {
            center: ['50%', '75%'],
            radius: '126%',
            type: 'gauge',
            min: 0, //最小值
            max: 100, //最大值
            startAngle: 180, //仪表盘起始角度
            endAngle: 0, //仪表盘结束角度
            splitNumber: 5, //仪表盘刻度的分割段数
            progress: {
              show: true, //是否显示进度条
              roundCap: false, //是否在两端显示成圆形
              width: 12, //进度条宽度
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#4DF1F0' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#3682E1' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            pointer: {
              keepAspect: true,
              itemStyle: {
                color: '#fff'
              }
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 26,
              icon: 'image://data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSI+PGcgb3BhY2l0eT0iMSIgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkgIHJvdGF0ZSgwKSI+PHBhdGggaWQ9IuakreWchuW9oiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHlsZT0iZmlsbDojMEU4QkZGIiBvcGFjaXR5PSIxIiBkPSJNMjMgMTNDMjMgNy40OCAxOC41MiAzIDEzIDNDNy40OCAzIDMgNy40OCAzIDEzQzMgMTguNTIgNy40OCAyMyAxMyAyM0MxOC41MiAyMyAyMyAxOC41MiAyMyAxM1oiPjwvcGF0aD48cGF0aCAgaWQ9IuakreWchuW9oiIgc3R5bGU9ImZpbGw6I0ZGRkZGRjsgb3BhY2l0eTowLjI7IiBkPSJNMjUsMTNjMCwtNi42Mjc0MiAtNS4zNzI2LC0xMiAtMTIsLTEyYy02LjYyNzQyLDAgLTEyLDUuMzcyNTggLTEyLDEyYzAsNi42Mjc0IDUuMzcyNTgsMTIgMTIsMTJjNi42Mjc0LDAgMTIsLTUuMzcyNiAxMiwtMTJ6TTI3LDEzYzAsNy43MzIgLTYuMjY4LDE0IC0xNCwxNGMtNy43MzE5OSwwIC0xNCwtNi4yNjggLTE0LC0xNGMwLC03LjczMTk5IDYuMjY4MDEsLTE0IDE0LC0xNGM3LjczMiwwIDE0LDYuMjY4MDEgMTQsMTR6Ij48L3BhdGg+PC9nPjwvc3ZnPg==',
            },
            axisLine: {
              show: true, //是否显示仪表盘轴线
              roundCap: false, //是否在两端显示成圆形
              lineStyle: {
                width: 12, //轴线宽度
                color: [
                  [1, 'rgba(51, 52, 81,0.6)'],
                ],
              }
            },
            axisTick: {
              show: false, //是否显示刻度
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false, //是否显示标题
              fontSize: 16,
            },
            detail: {
              show: true, //是否显示详情
              valueAnimation: true, //是否开启标签的数字动画
              borderRadius: 8, //文字块的圆角
              offsetCenter: [0, '20%'], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比
              fontSize: 22, //文字的字体大小
              formatter: function (params) {
                return params + ' 分'; // 在值后面添加标题
              },
              color: '#00FFBA' //文本颜色
            },
            data: [
              {
                value: 90,
                name: '分'
              }
            ]
          },
          {
            center: ['50%', '75%'],
            radius: '114%',
            type: 'gauge',
            min: 0, //最小值
            max: 100, //最大值
            startAngle: 180, //仪表盘起始角度
            endAngle: 0, //仪表盘结束角度
            splitNumber: 5, //仪表盘刻度的分割段数
            progress: {
              show: true, //是否显示进度条
              roundCap: false, //是否在两端显示成圆形
              width: 14, //进度条宽度
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(77, 241, 240,0.1)' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(54, 129, 224,0.1)' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            pointer: {
              show: false, //是否显示指针
            },
            axisLine: {
              show: true, //是否显示仪表盘轴线
              roundCap: false, //是否在两端显示成圆形
              lineStyle: {
                width: 14, //轴线宽度
                color: [
                  [1, 'rgba(8, 26, 59,0.6)'],
                ],
              }
            },
            axisTick: {
              show: false, //是否显示刻度
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false, //是否显示标题
              fontSize: 16
            },
            detail: {
              show: false, //是否显示详情
            },
            data: [
              {
                value: 90,
                name: '分'
              }
            ]
          },
          {
            type: 'gauge',
            center: ['50%', '75%'],
            radius: '98%',
            min: 0, //最小值
            max: 100, //最大值
            startAngle: 180, //仪表盘起始角度
            endAngle: 0, //仪表盘结束角度
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                width: 2,
                color: [
                  [1, 'rgba(54, 130, 225,0.2)'],
                ],
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              distance: -15, // 调整刻度值的距离
              color: 'rgba(255,255,255,0.5)', // 调整刻度值的颜色
              fontSize: 16, // 调整刻度值的字体大小
              formatter: function (value) {
                if (value === 0 || value === 50 || value === 100) {
                  return value;
                } else {
                  return '';
                }
              }
            },
            axisTick: {
              show: false
            },
          },
        ],
        // ...其他配置...
      },
               }
      }

}
</script>