echarts的二次封装

echarts的第一次封装

<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
 
<script>
import tdTheme from "./theme.json"; // 引入默认主题
import resizeMixins from "@/utils/resizeMixins";
 
export default {
  name: "echart",
    mixins: [resizeMixins],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      // default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "2.5rem",
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    options: {
      handler(options) {
        // 设置true清空echart缓存
        this.chart.setOption(options, true);
      },
      deep: true,
    },
  },
  mounted() {
    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
    this.initChart();
  },
  // created() {
  //   this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
  //   this.initChart();
  // },
  beforeDestroy(){
    // 离开页面
    console.log('离开页面')
      this.chart.clear()
      if (this.chart != null) {
      this.chart.dispose()
    }
 
  },
  methods: {
    initChart() {
      // 初始化echart
      this.chart = this.$echarts.init(this.$el, "tdTheme");
      // this.chart.clear()
      this.chart.setOption(this.options, true);
      // 设置自适应屏幕大小
      let that = this;
      window.addEventListener("resize", function () {
        that.chart.resize();
      });
      //   window.onresize = function () {
      //     myChart.resize();
      // that.chart.resize();
      //   };
    },
  },
};
</script>
 
<style></style>复制

echarts的二次封装

【二次封装】：包含通用的配置，不会改变的配置

使用场景：比如，页面上的柱状图，样式相同，但是文字颜色，数据，标题等不同，所以二次封装的echarts作用就是通用配置，灵活配置从获取数据的页面上获取

把series , x,y轴上的数据抽离

<template>
  <div>
    <!-- 基础配置 -->
    <Echart
      :options="options"
      :id="chartid"
      height="180px"
      width="100%"
    ></Echart>
  </div>
</template>
 
<script>
import Echart from "@/common/echarts/index.vue";
import _ from 'lodash'
export default {
  name: "MyappLastchart",
  components: {
    Echart,
  },
  props: {
    chartid:{
        type:String,
        default:''
    },
    cdata: {
      type: Object,
    //   type: Array,
      default: () => ({}),
    },
  },
  data() {
    return {
      options: {},
    };
  },
 
  mounted() {},
 
  methods: {},
  watch: {
    cdata: {
      handler(val) {
        console.log(999,val)
 
        var min = 50;
 
        this.options = {
          backgroundColor: "#111c4e",
          color: ["#3398DB"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line",
              lineStyle: {
                opacity: 0,
              },
            },
            // formatter: function (prams) {
            //   if (prams[0].data === min) {
            //     return "合格率：0%";
            //   } else {
            //     return "合格率：" + prams[0].data + "%";
            //   }
            // },
          },
          legend: {
            data: ["直接访问", "背景"],
            show: false,
          },
          grid: {
            left: "0%",
            right: "0%",
            bottom: "5%",
            top: "7%",
            height: "85%",
            containLabel: true,
            z: 22,
          },
          xAxis: [
            {
              type: "category",
              gridIndex: 0,
            //   data: xData,
              axisTick: {
                alignWithLabel: true,
              },
              axisLine: {
                lineStyle: {
                  color: "#0c3b71",
                },
              },
              axisLabel: {
                show: true,
                color: "rgb(170,170,170)",
                fontSize: 16,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              gridIndex: 0,
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              min: min,
              max: 100,
              axisLine: {
                lineStyle: {
                  color: "#0c3b71",
                },
              },
              axisLabel: {
                color: "rgb(170,170,170)",
                formatter: "{value} %",
              },
            },
            {
              type: "value",
              gridIndex: 0,
              min: min,
              max: 100,
              splitNumber: 12,
              splitLine: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              splitArea: {
                show: true,
                areaStyle: {
                  color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
                },
              },
            },
          ],
          series: [
            {
              name: "合格率",
              type: "bar",
              barWidth: "30%",
              xAxisIndex: 0,
              yAxisIndex: 0,
              itemStyle: {
                normal: {
                  barBorderRadius: 30,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#00feff",
                    },
                    {
                      offset: 0.5,
                      color: "#027eff",
                    },
                    {
                      offset: 1,
                      color: "#0286ff",
                    },
                  ]),
                },
              },
            //   data: yData,
              zlevel: 11,
            },
            {
              name: "背景",
              type: "bar",
              barWidth: "50%",
              xAxisIndex: 0,
              yAxisIndex: 1,
              barGap: "-135%",
              data: [100, 100, 100, 100, 100, 100, 100],
              itemStyle: {
                normal: {
                  color: "rgba(255,255,255,0.1)",
                },
              },
              zlevel: 9,
            },
          ],
        };
        this.options = _.merge(this.options,val)
      },
 
      deep: true,
      immediate: true,
    },
  },
};
</script>
 
<style lang="scss" scoped></style>复制

上述代码 要注意 获取数据的页面的灵活配置和通用配置的合并使用的是lodash的merge方法

【merge】：相同属性会覆盖，不同属性会合并；

获取数据的页面上获取灵活配置

 <Lastchart :cdata="options" :id="chartid" />
 
  getdata() {
      var data = [
        {
          name: "一月",
          value: 80,
        },
        {
          name: "二月",
          value: 87.8,
        },
        {
          name: "三月",
          value: 71,
        },
        {
          name: "四月",
          value: 80,
        },
        {
          name: "五月",
          value: 66,
        },
        {
          name: "六月",
          value: 80,
        },
        {
          name: "七月",
          value: 80,
        },
      ];
      var xData = [],
        yData = [];
      data.map(function (a, b) {
        xData.push(a.name);
        if (a.value === 0) {
          yData.push(a.value + min);
        } else {
          yData.push(a.value);
        }
      });
      this.options = {
        xAxis: [
          {
            data: xData,
          },
        ],
        yAxis: [{}, {}],
        series: [
          {
            data: yData,
          },
          {},
        ],
      };
    },复制