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

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日

悬赏问题

  • ¥20 unity实习让我做一个程序
  • ¥15 idea tomcat和sql驱动不匹配吗
  • ¥15 如何查看h3c 5130s-28f-si交换机配置 及更改网口
  • ¥15 HFSS仿真喇叭天线阵列方向图出现异常
  • ¥15 blender自发光强度
  • ¥15 FIR滤波器算法设计与实现(利用库函数firdec()
  • ¥15 利用单片机产生正弦信号,来测量差分放大电路放大倍数和共模放大倍数的思路和仿真
  • ¥60 关于mavlink的论文咨询
  • ¥66 定制开发肯德基自动化网站下单软件
  • ¥15 中科院研发的TextMind(文心)