<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>
vue2.x引入echarts的饼图后一片空白,控制台也没有报错
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
3条回答 默认 最新
- CSDN专家-showbo 2021-12-05 16:55关注
事件写错了,mounted,不是mouted,少了n
有帮助麻烦点下【采纳该答案】,谢谢~~本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用
悬赏问题
- ¥15 MapReduce结果输出到HBase,一直连接不上MySQL
- ¥15 扩散模型sd.webui使用时报错“Nonetype”
- ¥15 stm32流水灯+呼吸灯+外部中断按键
- ¥15 将二维数组,按照假设的规定,如0/1/0 == "4",把对应列位置写成一个字符并打印输出该字符
- ¥15 NX MCD仿真与博途通讯不了啥情况
- ¥15 win11家庭中文版安装docker遇到Hyper-V启用失败解决办法整理
- ¥15 gradio的web端页面格式不对的问题
- ¥15 求大家看看Nonce如何配置
- ¥15 Matlab怎么求解含参的二重积分?
- ¥15 苹果手机突然连不上wifi了?