vue项目中使用Echarts

首先看一下我页面所需展示的样子，如下：

最开始的时候呢，我先去官网(http://echarts.apache.org/zh/index.html)稍作了解，然后转战到看其他大佬的做法，后面选了一个代码齐全的（(https://www.cnblogs.com/ldlx-mars/p/7815328.html)），直接复制了下来，但是呢和我自己需要的echarts类型、所需数据以及主题颜色都不对口，这个代码呢就是把官网上的给一样搞下来了，但是其中一些东西就要自己去动动手指改改了。
正式步骤来了：

1. 做一个自己的component，代码就是上面那个接口里直接复制粘贴，当然前提项目要有安装好的依赖
2. 其次首先我改变的是echarts的主题颜色，需要浅色系的蓝色开始系列 ===》 在echarts官网上上部导航找到资源，选中主体构建工具点击，然后在左侧根据自己需求选择或搭配，确定之后点击下载主题，我们要的是josn版本的，根据自己复制或下载其内容，我嫌弃下载麻烦，直接复制的。
   在自己的项目里创建一个js文件，将复制下来的拷贝进去，我是chalk.js，{} 里面就是复制下来的主题颜色代码，chart.vue就是我复制的那个大佬代码；
   
   然后到chart.vue中，先导入后引用即可，也就添加两行代码：
   
3. 自己需要的那个echarts样式其实应该是第一个搞的，这个就更加简单了，在官网-实例中找到自己要的那个，直接点击它就会给我们它的option，进行替换即可，其他大小，间距样式等等，都可以根据自己的需求来修改；
4. 最后剩下一个数据问题，一般肯定是动态的可变的数据，我们可以使用watch监听，传值的至option来完成，相比原本的chart.vue代码有四处改动，不一一截图了，稍后将全代码附上；先来看一下页面中使用此’组件’，就是导入使用，然后给值获取动态值一样的思路；
   

上面图一三就是导入使用，并且有给chartData的动态值，图一里也给了最开始的值，图四就获取动态值进行替换了。
最后给出我要写的这个项目里的chart.vue，当然里面各种样式等都要根据各自所需实际，不过大径相同。

<template>
  <div class="analyzeSystem">
    <div :class="className" id="charts" ref="myEchart"></div>
  </div>
</template>

<script>

import echarts from "echarts";
import chalk from './chalk'

export default {
  name: "analyzeSystem",
  props: {
    className: {
      type: String,
      default: "yourClassName"
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      echarts.registerTheme('chalk',chalk); // 改变主题色
      this.chart = echarts.init(this.$refs.myEchart,'chalk');
      this.setOptions(this.chartData) 
    },
    setOptions({ value1, value2 } = {}){
        // 把配置和数据放这里
        this.chart.setOption({
          tooltip: {
            trigger: "item",
            formatter: "{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              left: 0,
              top: 130,
              data: ['归属用户资金余额', '归属平台资金余额']
          },
          series: [
              {
                  type: 'pie',
                  left: 280,
                  radius: ['50%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                      show: false,
                      position: 'center'
                  },
                  emphasis: {
                      label: {
                          show: true,
                          fontSize: '10',
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  data: [
                      {value: value1, name: '归属用户资金余额'},
                      {value: value2, name: '归属平台资金余额'},
                  ]
              }
          ]
        });

      }
  }
};
</script>

<style lang="scss" scoped>
#charts{
    // border: 1px solid red;
    height: 200px;
    width: 450px;
    position: absolute;
    z-index: 9999;
    margin-left: -304px;
    margin-top: -40px;
}
</style>

希望有所帮助啦。