陈朝焕 2021-12-05 15:56 采纳率: 100%
浏览 63
已结题

vue2.x引入echarts的饼图后一片空白,控制台也没有报错

<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>

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2021-12-05 16:55
    关注

    事件写错了,mounted,不是mouted,少了n
    有帮助麻烦点下【采纳该答案】,谢谢~~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 12月13日
  • 已采纳回答 12月5日
  • 创建了问题 12月5日

悬赏问题

  • ¥15 状态机/汽车转向灯/Sateflow
  • ¥15 这个有点复杂 有没有人看看
  • ¥15 用python如何确定子孙元素在父元素中的位置
  • ¥15 obj文件滤除异常高程
  • ¥15 用mathematicas或者matlab计算三重积分
  • ¥15 Loop unrolling的runtime计算
  • ¥100 NVMe-oF的Target端,开启attr_offload后,测试失败。
  • ¥100 有偿照片马赛克去掉,保留原始数据
  • ¥15 c# winform http报错,如何解决?
  • ¥15 统计软件及应用-r软件