vue3.0引入Echart图标

获取Echart.js文件

npm install echarts --save（我使用这个下载失败了）

使用镜像：cnpm install echarts --save(我是用这个可以，也不知道为啥)

按需引入（使用页面）

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require("echarts/lib/component/legend");

export default {
}
</script>

html

 <div class="echart_box"> 
      <div class="echart_con">
        <div>审批中(件):<span>15000</span></div>
         <div>已通过(件):<span>15000</span></div>
          <div>已拒绝(件):<span>15000</span></div>
      </div>
      <div class="pie">//饼状图
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main1" style="width: 100%; height: 200px"></div>
      </div>
    </div>

js部分

 mounted() {
    this.initData()
  },
//初始化数据
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'))
      // 绘制图表
      myChart.setOption({
        color:[ '#ffc400','#009900','#FF0000'],
        title: {
          text: '信息化业务合计（件）：5200', //主标题
          top:'7%',//标题距离图标的位置
          // left:'0',
          textStyle:{//标题的样式内容
            fontSize: 14
          },
          // subtext: '信息化业务合计（件）：5200', //副标题
          x: 'center' ,//x轴方向对齐方式
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: ['审批中', '已通过', '已拒绝']
        },
        series: [
          {
            name: '审批统计',//统计图的信息数据来源
            type: 'pie',
            radius: '40%',
      center: ['50%', '50%'],
            data: [
              { value: 335, name: '审批中' },
              { value: 310, name: '已通过' },
              { value: 234, name: '已拒绝' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }

样式属性参考：ECharts 教程 | 菜鸟教程