一.可借助echarts官网来安装或者如下
// 安装 echarts 组件
// 方法一 个人推荐
npm install echarts --save
// 方法二 全局安装 容易出现问题
npm install echarts -g
二.在main.js中全局引用
import * as echarts from "echarts";
三.创建 Echarts.vue 组件,将组件添加到 Echarts.vue 中使用即可,如下
html 中div高宽是必须的 id必须唯一
完整代码如下:
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div>
<div id="myChart" :style="{ width: '800px', height: '600px' }"></div>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Echarts",
mounted() {
// eslint-disable-next-line @typescript-eslint/no-var-requires
let echarts = require("echarts");
let myChart = echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "center",
},
series: [
{
name: "Access From",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "40",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" },
],
},
],
});
},
};
</script>
效果图如下