yarn add echarts
src 中main.js 引入
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
页面代码
<template>
<div
id="main"
style="width: 600px; height: 400px; margin-left: auto; margin-right: auto"
></div>
</template>
<script>
export default {
name: "",
data() {
return {
charts: "",
opinion: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
opinionData: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" },
],
};
},
methods: {
go() {
this.$router.push("/echar");
},
drawPie(id) {
this.charts = this.$echarts.init(document.getElementById(id));
this.charts.setOption({
tooltip: {
trigger: "item",
formatter: "{a}<br/>{b}:{c} ({d}%)",
},
legend: {
orient: "vertical",
x: "left",
data: this.opinion,
},
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "70%"],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: "center",
},
emphasis: {
show: true,
textStyle: {
fontSize: "30",
fontWeight: "blod",
},
},
},
labelLine: {
normal: {
show: false,
},
},
data: this.opinionData,
},
],
});
},
},
//调用
mounted() {
this.$nextTick(function () {
this.drawPie("main");
});
},
};
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
原文地址:https://blog.csdn.net/weixin_38201500/article/details/117822409
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。