首页 前端知识 【vue】 在vue2项目中使用echarts

【vue】 在vue2项目中使用echarts

2024-05-03 18:05:17 前端知识 前端哥 485 68 我要收藏

文章目录

        • 1.安装 echarts 依赖:echarts
        • 2.在main.js中全局引入echarts
        • 3.在页面中使用
        • 4.效果图

前言

今天vue2项目要用到echarts,临时网上百度了一个很好用,拿来copy一下以备不时之需。

原文章:在vue2项目中使用echarts

1.安装 echarts 依赖:echarts
npm install echarts -S
// 或者使用淘宝的镜像
npm install -g cnpm --registry=https:// registry.npm.taobao.org
cnpm install echarts -S
2.在main.js中全局引入echarts
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
3.在页面中使用
<template>
  <div id="myChart" :style="{ width: '800px', height: '500px' }"></div>
</template>
 
<script>
export default {
  name: "Pc2FbEcharts",
 
  data() {
    return {};
  },
 
  mounted() {
    this.drawLine();
  },
 
  methods: {
    drawLine() {
      // 基于准备好的dom,初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "全校分班人数统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          top: "10%",
          left: "center",
        },
        color: ['#6eb158', '#cdcdcd', '#3f8cff'],
        series: [
          {
            name: "分班情况",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "已分班人数" },
              { value: 735, name: "未分班人数" },
              { value: 580, name: "待认定人数" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}:}{c}  {per|{d}%}  ",
              backgroundColor: "",
              borderColor: "",
              borderWidth: 1,
              borderRadius: 4,
              rich: {},
            },
          },
        ],
      });
    },
  },
};
</script>
4.效果图

在这里插入图片描述

下班~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6817.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!