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 = 0let targetfor (let i = 0; i < dataPost.length; i++) {total += dataPost[i].valueif (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}]效果如下：
