封装Echarts组件

最新推荐文章于 2024-03-20 10:06:04 发布

saadiya~

最新推荐文章于 2024-03-20 10:06:04 发布

阅读量1.2k

点赞数

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/m0_57997609/article/details/127664614

版权

1.新建echarts.vue页面


<template>
  <div ref="chartRef" :id="id" :class="className" :style="{ height: height, width: width }"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: "Echarts",
  props: {
    id: { type: String, default: "myChart" },
    className: { type: String, default: "chart" },
    width: { type: String, default: "100%" },
    height: { type: String, default: "100%" },
    options: { type: Object, default: () => ({}) },
    res: {
      type: [Number, String],
      defaults: ""
      // _resizeHandler
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs["chartRef"]);
    this.initChart();
    // window.addEventListener("resize", ()=> {
    //   this.chart.resize(); //下面可以接多个图
    // });
  },
  beforeDestroy() {
    if (!this.chart) return;
    this.chart.dispose();
    this.chart = null;
  },
  watch: {
    options: {
      handler(val) {
        if (JSON.stringify(val) !== "{}") {
          this.initChart(val, true);
        }
      },
      deep: true,
      immediate: true
    },
    res: {
      handler(v) {
        this.$_resizeHandler();
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    $_resizeHandler() {
      if (!this.chart) return;
      this.chart.resize();
    },
    initChart(data, clearCaching = false) {
      if (data || this.options) {
        if (this.chart) {
          this.chart.setOption(data || this.options, clearCaching);
          this.$emit("getChart", this.chart);
        }
      }
    }
  }
};
</script>

2.main.js 全局挂载

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

3.页面引用

<template>
  <div class="container">
            <div class="top_circle">
              <Echarts
                style="width: 100%; height: 100%"
                id="chart10"
                :options="luLeftOption"
              />
            </div>
  </div>
</template>
	
	<script>
import Echarts from "@/components/Echarts";
import echarts from "echarts";
import "echarts-liquidfill";

export default {
  name: "trackPlayback",
  components: {
    Echarts,
  },
  data() {
    return {
      // 路况指数 echarts
      luLeftOption: {},
     
    };
  },
  watch: {},
  mounted() {
  
    this.getLeft();
 
  },
  destroyed() {},
  methods: {
   
  
    // 左侧 速度
    getLeft() {
      this.luLeftOption = {
        backgroundColor: "",
        grid: {
          right: "0%",
          left: "0%",
          top: "0%",
          bottom: "0%",
          // borderWidth: 1,
        },
        xAxis: {
          show: false,
          type: "category",
          data: ["Mon"],
        },
        yAxis: {
          show: false,
          type: "value",
        },
        series: [
          {
            name: "AM",
            type: "gauge",
            radius: "100%",
            min: 0,
            max: 360,
            splitNumber: 5,
            startAngle: 180,
            endAngle: -179.9,
            zlevel: 0,

            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 16, // 仪表盘宽度
                color: [
                  [0.2, "#EC7777"],
                  [0.4, "#F1C176"],
                  [0.6, "#E08E42"],
                  [0.8, "#5CC314"],
                  [1, "#63C617"],
                ],
              },
            },

            data: this.speed_left_data,
            legend: {
              padding: 0,
              margin: 0,
            },
            pointer: {
              show: true,
              length: "60%",
              radius: "50%",
              width: 3, //指针粗细
            },
            title: {
              // 仪表盘标题。
            
              show: false, // 是否显示标题,默认 true。
            },
            axisTick: {
              show: false,
              splitNumber: 5,
              lineStyle: {
                width: 2,
              },
              length: -8,
            },
            //刻度样式
            splitLine: {
              show: false,
              length: -20,
              lineStyle: {
                color: "red", //用颜色渐变函数不起作用
              },
            },

            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              //饼图中间显示配置
              label: {
                show: false,
                fontSize: "10",
                fontWeight: "bold",
                formatter: "{b}: {d}",
              },
            },

            //分隔线样式
            axisLabel: {
              show: false,
              distance: -20,
            },
          },
        ],
      };

      
    },

    },
  },
};
</script>
<style lang="scss" scoped>

</style>