位置: IT常识 - 正文

Echarts 饼图基本用法(echarts饼图参数配置)

编辑：rootadmin

Echarts 饼图基本用法

引入Echarts

创建饼图

拓展

引入Echarts

推荐整理分享Echarts 饼图基本用法(echarts饼图参数配置)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:echarts画饼图,echarts的饼图,echarts饼图动画效果,echarts饼状图代码,echart 饼状图,echarts饼图formatter,echart 饼状图,echarts饼图formatter,内容如对您有帮助，希望把文章链接给更多的朋友！

所介绍的两种方法，适用于使用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" />  <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></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>拓展