Vue 如何快速上手ECharts图表到项目

参考

官方文档参考：https://www.echartsjs.com/zh/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

准备

所用到的第三方插件的安装：

cnpm i echarts --save

// 这个插件用在页面内容发生变化时，重新绘制图表
cnpm i resize-detector --save

// 一个函数辅助库
cnpm i lodash --save

简单使用

<template>
  <div ref="main"></div>
</template>

<script>
import echarts from "echarts";
export default {
    mounted() {
        // var myChart = echarts.init(document.getElementById('main'));
        // vue 中快速获取DOM元素
        this.myChart = echarts.init(this.$refs.main);
        this.myChart.setOption({
                title: {
                  text: "ECharts 入门示例"
                },
                tooltip: {},
                xAxis: {
                  data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [
                  {
                    name: "销量",
                    type: "bar",
                    data: [5, 20, 36, 10, 10, 20]
                  }
                ]
              });
    }
}
</script>

高级使用

1、为了方便扩展复用，这里我们做成一个公用的Commponents组件 EChartsVue.vue

<!-- 图表 -->
<template>
  <div ref="main"></div>
</template>

<script>
import echarts from "echarts";
import { addListener, removeListener } from "resize-detector";
import debounce from "lodash/debounce";
export default {
  props: {
    chartOption: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    chartOption(val) {
      // 观察options的变化
      this.myChart.setOption(val);
    }
    // 深度监听内部数据的变化，响应式
    // chartOption: {
    //   handler(val) {
    //     this.myChart.setOption(val);
    //   },
    //   deep: true
    // }
  },
  created() {
    this.resize = debounce(this.resize, 300);
  },
  mounted() {
    this.renderChart();
    addListener(this.$refs.main, this.resize);
  },
  methods: {
    resize() {
      console.log("resize计算");
      this.myChart.resize();
    },
    renderChart() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(this.$refs.main);
      this.myChart.setOption(this.chartOption);
    }
  },
  
  // 释放资源防止溢出
  beforeDestroy() {
    removeListener(this.$refs.main, this.resize);
    this.myChart.dispose();
    this.myChart = null;
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>

2、引用组件,给个自定义样式

<div>
  <EChartsVue :chartOption="homeOptions" style="height:400px;" />
</div>

<script>
import EChartsVue from "../components/ECharts.vue";
export default {
    components: {
      EChartsVue
    },
    data() {
        return {
        // 这里还是使用MOCK数据
          homeOptions: {
            title: {
              text: "ECharts 入门示例"
            },
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          }
        };
      }，
     mounted() {
      // 这个请求接口数据。。。并赋值转换对象就可以。这里随机数模拟对象
        this.interval = setInterval(() => {
        this.homeOptions.series[0].data = this.homeOptions.series[0].data.map(
            () => random(100)
        );
        this.homeOptions = { ...this.homeOptions };
        }, 1000);
      },
      beforeDestroy() {
        clearInterval(this.interval);
      }
};
}
</script>

结束