Echarts 饼图基本用法

最新推荐文章于 2024-03-12 14:41:25 发布

我想当话家

最新推荐文章于 2024-03-12 14:41:25 发布

阅读量8.4k

点赞数 9

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_50148250/article/details/126183550

版权

引入Echarts

所介绍的两种方法，适用于使用Echarts的每种图。

在一般的html里引入Echarts，需要下载echarts.js文件。在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。再到html文件中引入该文件，如下所示。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

在使用了vue框架的项目中引入Echarts。

直接使用命令安装Echarts资源包。（要连网时才能正常安装）

npm install echarts --save

创建饼图

从官网找到适合自己项目的图形。下图是我选择的图形

官网上的代码如下。官网上每个图形的“配套”代码只展示了配置图形的对象。（对使用Echarts的新手不太友好）当需要自定义图形的一些细节时，就需要修改一些内容。

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)'
        }
      }
    }
  ]
};

下面展示我项目中最终饼图的样子，并对饼图的一些配置进行说明。

<template>
  <div class="pie-container">
    <div class="pie" ref="pieBox" style="height: 100%"></div>
    <!-- <div class="colors"></div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
// import { debounce } from "@/util/debounce.js";
export default {
  mounted() {
    this.initPieData();
    window.addEventListener("resize", this.reload); //监听浏览器视口变化，并重绘图形
  },
  destroyed() {
    window.removeEventListener("resize", this.reload);
  },
  data() {
    return {
      //接口返回的数据格式
      echartsData: {
        pieArr: [
          {
            color: "#cc80cc",
            name: "儿童读物",
            value: 0,
            code: "3",
            softFiled: 1,
          },
          {
            color: "#8BA1AE",
            name: "言情小说",
            value: 0,
            code: "1",
            softFiled: 1,
          },
          {
            color: "#99aa00",
            name: "热门推荐",
            value: 1,
            code: "0",
            softFiled: 3,
          },
          {
            color: "#00aaff",
            name: "悬疑",
            value: 1,
            code: "6",
            softFiled: 5,
          },
          {
            color: "#33aa33",
            name: "教辅资料",
            value: 1,
            code: "7",
            softFiled: 7,
          },
          {
            color: "#66d5ff",
            name: "名著",
            value: 5,
            code: "00",
            softFiled: 11,
          },
          {
            color: "#f0dcfc",
            name: "工科学习资料",
            value: 1,
            code: "11",
            softFiled: 11,
          },
          {
            color: "#968FD3",
            name: "书画集",
            value: 0,
            code: "30",
            softFiled: 11,
          },
        ],
        headMsg: {
          totalNum: 9,
          onDuty: 5,
          firstDeptName: "名著占比",
          offDuty: 4,
          dutyPercent: "0.55555556",
        },
        msg: "success",
      },
      pieChart: null,
    };
  },
  methods: {
    // 重新刷新界面的功能
    // reload: debounce(function () {
    //   this.disposeCharts();
    //   this.initPieData();
    //   // location.reload();
    // }, 300),

    /**
     * 销毁饼图
     */
    disposeCharts() {
      echarts.dispose(this.pieChart);
    },
    //得到饼图的数据格式（Echarts规定的格式） { value: 12, name: '在线', itemStyle: { color: '#005eff' } },
    getPieData(pieArr) {
      const pieData = pieArr.map((item) => {
        return {
          value: `${item.value}`,
          name: `${item.name}：${item.value}本`, //name 为每一项的标题，影响鼠标浮动和图例
          itemStyle: { color: `${item.color}` },
        };
      });
      return pieData;
    },
    //如果需要修改图例，可以得到图例的数据格式，在放到配置项中
    // getLegendData(Arr) {
    //   const legendData = Arr.map((item) => {
    //     return {
    //       name: `${item.name}  ${item.value}本`,
    //       icon: "circle",
    //     };
    //   });
    //   return legendData;
    // },

    //初始化饼图
    initPieData() {
      this.pieChart = echarts.init(this.$refs.pieBox); //选中dom
      const dutyPercent =
        ((+this.echartsData.headMsg.dutyPercent).toFixed(4) * 100).toFixed(2) +
        "%"; //因为js本身的精度问题所以乘了一百之后又保留了两位小数 也可以用bigInt解决
      let onDutyNum = this.echartsData.headMsg.onDuty;
      let totalNum = this.echartsData.headMsg.totalNum;
      let pieData = this.getPieData(this.echartsData.pieArr); //获取饼图的数据格式
      let option = {
        backgroundColor: "#fff", //设置饼图的画布的背景色
        //修改标题
        title: {
          top: 10, //类似于定位中的top
          text: "名著占总售书籍的比例",
          subtext: `总售书：${totalNum}本    名著:（${onDutyNum}本，${dutyPercent}）`, //f副标题
          left: "center",
          itemGap: 12, //主标题与副标题的间隙
          textStyle: {
            fontSize: 28,
          },
          subtextStyle: {
            fontSize: 16,
          },
        },
        //修改鼠标悬浮到饼图上的文字
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>{b}（{d}%）",
        },
        // 调整图例位置
        legend: {
          top: 360,
          orient: "vertical",
          x: "center",
          y: "bottom",
          width: "100",
          padding: [0, 0, 5, 0], //上右下左
          itemWidth: 15,
          icon: "circle",
          itemGap: 20,
          textStyle: {
            //图例字体样式
            fontSize: 16,
            fontFamily: "微软雅黑",
          },
        },
        series: [
          {
            top: "-40%",
            name: "名著占总售书籍的比例",
            type: "pie",
            radius: "60%",
            avoidLabelOverlap: false,
            data: pieData,
            center: ["50%", "50%"],
            //饼图上的指示线
            label: {
              normal: {
                position: "inner",
                show: false,
              },
            },
            //鼠标移动上去后饼图区域的样式改变
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      //生成饼图
      this.pieChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.pie-container {
  border: 1px #ccc solid;
  height: 700px;
  width: 400px;
  margin-left: 30px;
}
</style>