vue3引入echarts正确姿势

echarts文档地址：

echarts官网地址

echarts配置手册

echarts 模板地址

1、安装

（1）安装echarts包

npm install echarts --save
或者
cnpm install echarts --save

（2）安装vue echarts工具包 

npm install echarts vue-echarts
或者
cnpm install echarts vue-echarts

2、挂载

全局引入的挂载方式

在main.js文件中

 

import ECharts from 'vue-echarts' 
import "echarts";               
// 挂载ECharts   
app.component('ECharts',ECharts)  

 3. 自定义组件

<template>
  <div>
    <e-charts id="main" class="chart" :option="props.option" />
  </div>
</template>

<script setup lang="ts">
  import * as echarts from 'echarts';
  /** 接受父组件传来的值  */
  const props = defineProps({
    option: {
      type: Object,
      require: true
    }
  });

  onMounted(() => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    props.option && myChart.setOption(props.option);
  });
</script>

<style scoped>
  .chart {
    width: 600px;
    height: 400px;
  }
</style>

项目中使用

引入组件

 import CommonChart from "@/components/Echarts/commonChart.vue";

 传入option相关数据

const dataPost = [
    { value: 1048, name: '后厨清洁工' },
    { value: 735, name: '西式餐饮服务员帮工' },
    { value: 580, name: '宴席服务帮工' },
    { value: 484, name: '宴会服务帮工' },
    { value: 300, name: '礼宾员-门童零工' },
    { value: 300, name: '中餐饮大厅服务帮工' },
    { value: 300, name: '厨房帮工' },
    { value: 300, name: '洗衣房帮工' },
  ]
  const optionPost = {
    title: {
      text: '岗位来源分类',
      bottom: '0',
      left: 'center',
    },
    tooltip: {
      trigger: 'item'
    },
    legend: { // 对图形的解释部分
      orient: 'vertical',
      right: 10,
      y: 'center',
      icon: 'circle',
      formatter: (name : any) => {
        let total = 0
        let target
        for (let i = 0; i < dataPost.length; i++) {
          total += dataPost[i].value
          if (dataPost[i].name === name) {
            target = dataPost[i].value
          }
        }
        const arr = [
          '{a|' + name + '}',
          '{b|' + target + '}',
          '{c|' + ((target / total) * 100).toFixed(2) + '%}'
        ]
        return arr.join('  ')
      },
      textStyle: {
        padding: [10, 0, 0, 0],
        rich: {
          a: {
            fontSize: 15,
            width: 135
          },
          b: {
            fontSize: 15,
            width: 50,
          },
          c: {
            fontSize: 15,
            color: '#c1c1c1'
          },
        }
      }
    },
    series: [
      {
        name: '岗位来源分类',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['25%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: dataPost
      }
    ]

 效果如下：