echarts&Vue Vue中实现echarts绘图

1. 通过nmp安装echarts

npm install echarts --save

2. 引入echarts(易错点)

• 在main.js中实现全局引用

•  //引入echarts，从echarts中全部引用，应用别名echarts
  import * as echarts from 'echarts'
  //全局引用
  Vue.prototype.$echarts = echarts

3. 使用echarts

<template>
  <div>
    <!-- 给自定义id  给组件长度宽度    -->
    <div id="app" style="width:50%;height:376px"></div>
  </div>
</template>

4. 初始化

<script>
  export default {
    name: "circle",
    data() {
      return {}
    },
//在mounted里面进行初始化的挂载
//这里要使用mounted而不是created
    mounted() {
      this.getEchartInit();
    },
    methods: {
      getEchartInit() {
    //填写初始化的数值
        let option = {
          title: {
            text: '地壳中的元素含量',
            left: 'center',
            top: 'center'
          },
          series: [
            {
              type: 'pie',
              data: [
                {
                  value: 48.6,
                  name: '氧'
                },
                {
                  value: 26.3,
                  name: '硅'
                },
                {
                  value: 7.73,
                  name: '铝'
                },
                {
                  value: 4.75,
                  name: '铁'
                },
                {
                  value: 3.45,
                  name: '钙'
                },
                {
                  value: 2.74,
                  name: '钠'
                },
                {
                  value: 2.47,
                name: '钾'
                },
                {
                  value: 3.96,
                name: '其他'
                },
              ],
              radius: ['40%', '70%']
            }
          ]
        };
    //通过dom的id选择器来执行echarts的init方法 获取echart实例
        let myChart = this.$echarts.init(document.getElementById('pie'));
    //给echarts赋值
        myChart.setOption(option);
      }
    }
  }
</script>

就实现了