vue2中使用echarts

1.安装  ：  npm install echarts --save

2、在main.js中引入echarts  

import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;

3.页面中使用

 

<template>

  <!-- 合同类型 -->
  <div class="echarts">
    <div v-if="pieData.length==0">
      //没有值的时候显示
      <h4>合同地域分布</h4>
      <el-empty description="暂无数据" :image="require('../../assets/png/缺省图 (1)暂无代办.png')"></el-empty>
    </div>
    <template v-else>
      <div class="pie" ref="pie" style="width: 100%; height: 350px"></div>
    </template>
  </div>
</template>


<script>
//引入接口
import {
  incomeStatistics, //收入统计
  contractLineChart, //合同折线图
  contractArealDistribution, //合同地域分布
} from "@/api/other/contract.js";


export default {
  data () {
    return {
      pieData: [], //饼图
    }
  },
  created () {
    this.getPie(); //地域饼状图

    //方法一：created()延迟加载getChart方法，先加载dom，否则会报错
    //方法二：使用mounted()挂载
    setTimeout(() => {
      this.inOrigin(); // 地域分布
    }, 2000);
  },
  mounted () {
  },
  methods: {


    // 地域饼状图
    inOrigin () {
      let myChart = this.$echarts.init(this.$refs.pie);
      // 地域分布---圆形饼状图
      let optionPie = {
        tooltip: {
          trigger: 'item',
        },
        title: {
          show: true,
          text: "地域分布",
          textStyle: {
            fontSize: 16,
            fontweight: 600,
            color: ' #292B33',
          },
        },
        legend: {
          orient: "horizontal",
          icon: "circle",
          itemHeight: 8,
          itemWidth: 8,
          bottom: "15%",
          left: "0% ",
        },

        color: ["#5B8FF9", "#00CCCC ", "#F6BD16 ", "##FF3343", "#9661BC"],
        series: [{
          // name: "Access From",
          type: 'pie',
          radius: ['20%', '45%'],
          center: ['50%', '45%'],
          // roseType: 'area',
          // 鼠标悬浮
          animation: false,
          avoidLabelOverlap: false,
          //  取消牵引线
          label: {
            normal: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          // label: {
          //   formatter: "{c}",
          // },
          data: this.pieData,
        },],
      };
      //图标自适应
      let listener = function () {
        myChart.resize()
      }
      window.addEventListener('resize', listener)
      //图标自适应
      myChart.setOption(optionPie);
    },
    // 接口--地域饼状图
    getPie () {
      contractArealDistribution().then((res) => {
        let data = res.data;
        for (let i = 0; i < data.length; i++) {
          this.pieData.push({
            value: data[i].contractQuantity,
            name: data[i].province,
          });
        }
      });
    },

  },
}
</script>