<template>
<div id="chart" :style="{ width: '300px', height: '300px' }"></div>
</template>
<script>
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/title");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/chart/pie");
var option;
option = {
title: {
text: "Referer of a Website",
subtext: "Fake Data",
left: "center",
},
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
},
series: [
{
name: "Access From",
type: "pie",
radius: "50%",
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
export default {
name: "Echarts",
components: {},
props: {},
data() {
return {};
},
mouted() {
this.drawLine();
},
methods: {
drawLine() {
var chartDom = document.getElementById("chart");
var myChart = echarts.init(chartDom);
option && myChart.setOption(option);
},
},
computed: {},
};
</script>
<style scoped>
.myChart {
box-sizing: border-box;
padding: 0.5rem;
float: right;
}
</style>
![](https://profile-avatar.csdnimg.cn/default.jpg!4)
vue2.x引入echarts的饼图后一片空白,控制台也没有报错
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
3条回答 默认 最新
- CSDN专家-showbo 2021-12-05 16:55关注
事件写错了,mounted,不是mouted,少了n
有帮助麻烦点下【采纳该答案】,谢谢~~本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用
悬赏问题
- ¥15 在若依框架下实现人脸识别
- ¥15 网络科学导论,网络控制
- ¥100 安卓tv程序连接SQLSERVER2008问题
- ¥15 利用Sentinel-2和Landsat8做一个水库的长时序NDVI的对比,为什么Snetinel-2计算的结果最小值特别小,而Lansat8就很平均
- ¥15 metadata提取的PDF元数据,如何转换为一个Excel
- ¥15 关于arduino编程toCharArray()函数的使用
- ¥100 vc++混合CEF采用CLR方式编译报错
- ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
- ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
- ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同