vue 常用插件

最新推荐文章于 2024-01-25 10:03:20 发布

笑笑樂

最新推荐文章于 2024-01-25 10:03:20 发布

阅读量95

点赞数

分类专栏：插件文章标签： vue

本文链接：https://blog.csdn.net/asgdfasg/article/details/112466914

版权

插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

- - - 富文本编辑器
    - echarts图表

富文本编辑器

官方文档

文档描述
在这里插入图片描述

安装

npm i wangeditor --save

使用

<template>
  <div>
    <div id="edit"></div>
  </div>
</template>
<script>
import E from "wangeditor";
export default {
  mounted() {
    const editor = new E("#edit");
    editor.create();
  },
};
</script>

echarts图表

官方文档

在这里插入图片描述
安装

npm i echarts --save

使用

<template>
  <div>
    <div id="main" style="width: 90%; height: 450px; margin: 0 auto"></div>
  </div>
</template>
<script>
var echarts = require("echarts");
export default {
  data() {
    return {
      option: {
        title: {
          text: "用户分布",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["北京", "上海", "深圳", "杭州", "其他"],
        },
        series: [
          {
            name: "用户分布",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 0, name: "北京" },
              { value: 0, name: "上海" },
              { value: 0, name: "深圳" },
              { value: 0, name: "杭州" },
              { value: 0, name: "其他" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  created() {
    this.$API.visitor().then((res) => {
      // console.log(res);
      this.option.series[0].data[0].value = res.data.user_city.beijing;
      this.option.series[0].data[1].value = res.data.user_city.shanghai;
      this.option.series[0].data[2].value = res.data.user_city.shenzhen;
      this.option.series[0].data[3].value = res.data.user_city.hangzhou;
      this.option.series[0].data[4].value = res.data.user_city.qita;
    });
  },
  watch: {
    option: {
      handler(newVal) {
        // console.log(newVal);
        var myChart = echarts.init(document.getElementById("main"));
        myChart.setOption(newVal);
      },
      deep: true,
    },
  },
};
</script>