前言：

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

vue项目中引入echarts图表并实现窗口自适应,随窗口大小变化自适应

1. 引入echarts

npm install echarts --save

2.将echarts设置为全局

main.js（项目入口文件）

//引入echarts文件
import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

// 或
// import echarts from 'echarts'
// import 'echarts-wordcloud' // 引入词云包
// Vue.prototype.$echarts = echarts

3.使用

HTML代码

<template>
  <div ref="container" class="container"></div>
</template>

js脚本代码

字体自适应写法 fontSize: 16,写为 fontSize: this.fontSize(0.4),

<script>
export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.reloadChart();
    
    // 加载图表后进行监听重新加载图表
    window.addEventListener("resize", () => {
      this.reloadChart();
    });
  },
  methods: {
    drawChart() {
      this.chart = this.$echarts.init(this.$refs.container);
      // 数据
      var data = [];
      var dataText = [ ];
      // 放入要展示的echarts代码
      let option = { };
      this.chart.setOption(option);
    },
    //销毁图表。
    disposeChart() {
      if (this.chart) {
        this.chart.dispose();
      }
    },
    //重新加载图表。
    reloadChart() {
      this.disposeChart();
      this.drawChart();
    },
    // 字体自适应。
    fontSize(res) {
      const clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      const fontSize = 40 * (clientWidth / 1920);
      return res * fontSize;
    },
  },
  //组件销毁。
  destroyed() {
    this.disposeChart();
  },
};
</script>

> css样式代码
```javascript
<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>

完整使用

以雷达图为例 如图：

<!--雷达图开发-->
<template>
  <div ref="container" class="container"></div>
</template>
<script>
export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.reloadChart();
    window.addEventListener("resize", () => {
      this.reloadChart();
    });
  },
  methods: {
    drawChart() {
      this.chart = this.$echarts.init(this.$refs.container);
      var data = [[4600, 13000, 25000, 23500, 25000]];
      var dataText = [
        {
          name: "设备",
          max: 6500,
        },
        {
          name: "建材",
          max: 16000,
        },
        {
          name: "食品",
          max: 30000,
        },
        {
          name: "服装",
          max: 38000,
        },
        {
          name: "旅游",
          max: 52000,
        },
      ];
      let option = {
        tooltip: {},
        legend: {
          show: true,
          icon: "circle",
          bottom: 30,
          center: 0,
          //   itemWidth: 14,
          itemHeight: 14,
          shadowColor: "rgba(0, 0, 0, 1)",
          shadowBlur: 30,
          shadowOffsetX: 10,
          shadowOffsetY: 10,
          // itemGap: 30,
          //   orient: "horizontal",
          data: ["一级", "二级"],
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
        },

        radar: {
          // shape: 'circle',
          radius: "80%",
          center: ["50%", "50%"],
          startAngle: 270,
          triggerEvent: true,
          name: {
            textStyle: {
              color: "#fff",
              fontSize: "14",
              borderRadius: 3,
              padding: [3, 5],
            },
          },
          nameGap: "2",
          indicator: dataText,
          splitArea: {
            areaStyle: {
              color: [
                "rgba(0,255,255, 0.1)",
                "rgba(0,255,255, 0.2)",
                "rgba(0,255,255, 0.3)",
                "rgba(0,255,255, 0.4)",
                "rgba(0,255,255, 0.5)",
                "rgba(0,255,255, 0.6)",
              ].reverse(),
              shadowColor: "rgba(0, 0, 0, 1)",
              shadowBlur: 30,
              shadowOffsetX: 10,
              shadowOffsetY: 10,
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0, 0)",
            },
          },
          splitLine: {
            lineStyle: {
              width: 1,
              color: [
                "rgba(0,206,209, 0.1)",
                "rgba(0,206,209, 0.2)",
                "rgba(0,206,209, 0.3)",
                "rgba(0,206,209, 0.4)",
                "rgba(0,206,209, 0.5)",
                "rgba(0,206,209, 0.6)",
              ].reverse(),
            },
          },
        },
        series: [
          {
            name: "一级权重分析",
            type: "radar",
            areaStyle: {
              normal: {
                color: "rgba(127,255,210, 0.5)",
              },
            },
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              color: "#fff",
              // borderColor: 'rgba(127,255,210,0.2)',
              borderWidth: 10,
            },
            lineStyle: {
              color: "rgba(127,255,210, 0.6)",
              width: 2,
            },
            label: {
              show: true,
            },
            data: data,
          },
        ],
      };
      this.chart.setOption(option);
    },
    //销毁图表。
    disposeChart() {
      if (this.chart) {
        this.chart.dispose();
      }
    },
    //重新加载图表。
    reloadChart() {
      this.disposeChart();
      this.drawChart();
    },
    // 字体自适应。
    fontSize(res) {
      const clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      const fontSize = 40 * (clientWidth / 1920);
      return res * fontSize;
    },
  },
  //组件销毁。
  destroyed() {
    this.disposeChart();
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>

如有疑问欢迎留言