Vue+Echarts绘制饼图的示例详解
1 引入Echarts
1.1 安装
使用如下命令通过 npm 安装 ECharts
npm install echarts --save
注：本文安装Echarts版本为：“echarts”: “5.2.1”
1.2 引入
安装完成以后，可以将echarts全部引入，这样一来，我们可以在该页面使用echarts所有组件；引入代码如下：
import * as echarts from "echarts";
1.3 基本使用
vue+Echarts基本使用请见：在Vue项目中引入 ECharts
2 基本饼状图
饼图和折线图、柱状图略有不同，不再需要配置坐标轴，而是把数据名称和值都写在系列中。只需要一个series属性即可画出饼图，以下是一个最简单的饼图的例子。
const option = {
series: [
{
type: "pie", // type设置为饼图
data: [
{
value: 463,
name: "江苏"
},
{
value: 395,
name: "浙江"
},
{
value: 157,
name: "山东"
},
{
value: 149,
name: "广东"
},
{
value: 147,
name: "湖南"
}
]
}
]
};需要注意的是，这里是 value 不需要是百分比数据，ECharts 会根据所有数据的 value ，按比例分配它们在饼图中对应的弧度。
图示：
3 为饼图添加标题等属性
3.1 标题图例
通常我们给饼图设置标题，可以通过title属性设置，其中title.text代表图表标题的文本，可以通过left ,top ,right ,bottom 四个属性调整标题位置，title.textStyle设置标题文本样式。
此外我们也可给标题设置图例：
legend:data对应折线名称以及数量，位置属性left ,top ,right ,bottom ；图例方向orient：默认横向排列，vertical表示纵向排列。
例子如下：
const option = {
legend: {
// 图例
data: ["江苏", "浙江", "山东", "广东", "湖南"],
right: "10%",
top: "30%",
orient: "vertical"
},
title: {
// 设置饼图标题，位置设为顶部居中
text: "国内院士前五省份图示",
top: "0%",
left: "center"
},
series: [
{
type: "pie",
data: [
{
value: 463,
name: "江苏"
},
{
value: 395,
name: "浙江"
},
{
value: 157,
name: "山东"
},
{
value: 149,
name: "广东"
},
{
value: 147,
name: "湖南"
}
]
}
]
};如图所示：
3.2 数据展示
饼图的文本标签书信默认值与柱状图和折线图不同，柱状图和折线图文本标签默认不展示，也就是label.show默认为false，但是饼图文本标签默认展示，也就是label.show默认为true；饼图数值默认不会展示在图上，需要借助label.formatter将数据展示在图上，示例如下：
const option = {
legend: {
// 图例
data: ["江苏", "浙江", "山东", "广东", "湖南"],
right: "10%",
top: "30%",
orient: "vertical"
},
title: {
// 设置饼图标题，位置设为顶部居中
text: "国内院士前五省份图示",
top: "0%",
left: "center"
},
series: [
{
type: "pie",
label: {
show: true,
formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
},
data: [
{
value: 463,
name: "江苏"
},
{
value: 395,
name: "浙江"
},
{
value: 157,
name: "山东"
},
{
value: 149,
name: "广东"
},
{
value: 147,
name: "湖南"
}
]
}
]
};图示如下：
3.3 样式设置
样式设置这块只对饼图的半径进行说明，可以通过 series.radius 设置，可以是诸如 '30%' 这样相对的百分比字符串，或是 200 这样的绝对像素数值。当它是百分比字符串时，它是相对于容器宽高中较小的一条边的。也就是说，如果宽度大于高度，则百分比是相对于高度的，反之则反；当它是数值型时，它表示绝对的像素大小。
示例如下：
const option = {
legend: {
// 图例
data: ["江苏", "浙江", "山东", "广东", "湖南"],
right: "10%",
top: "30%",
orient: "vertical"
},
title: {
// 设置饼图标题，位置设为顶部居中
text: "国内院士前五省份图示",
top: "0%",
left: "center"
},
series: [
{
type: "pie",
label: {
show: true,
formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
},
radius: "30%", //饼图半径
data: [
{
value: 463,
name: "江苏"
},
{
value: 395,
name: "浙江"
},
{
value: 157,
name: "山东"
},
{
value: 149,
name: "广东"
},
{
value: 147,
name: "湖南"
}
]
}
]
};图示如下：
以上示例vue代码如下：
<template>
<div class="echart" id="mychart" :style="myChartStyle"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
myChart: {},
pieData: [
{
value: 463,
name: "江苏"
},
{
value: 395,
name: "浙江"
},
{
value: 157,
name: "山东"
},
{
value: 149,
name: "广东"
},
{
value: 147,
name: "湖南"
}
],
pieName: [],
myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
};
},
mounted() {
this.initDate(); //数据初始化
this.initEcharts();
},
methods: {
initDate() {
for (let i = 0; i < this.pieData.length; i++) {
// this.xData[i] = i;
// this.yData =this.xData[i]*this.xData[i];
this.pieName[i] = this.pieData[i].name;
}
},
initEcharts() {
// 饼图
const option = {
legend: {
// 图例
data: this.pieName,
right: "10%",
top: "30%",
orient: "vertical"
},
title: {
// 设置饼图标题，位置设为顶部居中
text: "国内院士前五省份图示",
top: "0%",
left: "center"
},
series: [
{
type: "pie",
label: {
show: true,
formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
},
radius: "30%", //饼图半径
data: this.pieData
}
]
};
console.log(this.seriesData);
const optionFree = {
xAxis: {},
yAxis: {},
series: [
{
data: this.seriesData,
type: "line",
smooth: true
}
]
};
this.myChart = echarts.init(document.getElementById("mychart"));
this.myChart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
this.myChart.resize();
});
}
}
};
</script>4 饼图扩展
在 ECharts 中，饼图的半径radius除了3.3节提到的，可以是一个数值或者字符串之外，还可以是一个包含两个元素的数组，每个元素可以为数值或字符串。当它是一个数组时，它的前一项表示内半径，后一项表示外半径，这样就形成了一个圆环图。
从这个角度上来说，可以认为饼图是一个内半径为 0 的圆环图，也就是说，饼图是圆环图的特例。
例子：
const option = {
legend: {
// 图例
data: ["江苏", "浙江", "山东", "广东", "湖南"],
right: "10%",
top: "30%",
orient: "vertical"
},
title: {
// 设置饼图标题，位置设为顶部居中
text: "国内院士前五省份图示",
top: "0%",
left: "center"
},
series: [
{
type: "pie",
label: {
show: true,
formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
},
radius: ["40%", "70%"], //圆环内半径40%，外半径70%
data: [
{
value: 463,
name: "江苏"
},
{
value: 395,
name: "浙江"
},
{
value: 157,
name: "山东"
},
{
value: 149,
name: "广东"
},
{
value: 147,
name: "湖南"
}
]
}
]
};如图所示：
5 总结
饼图在我们业务场景中引用价位哦广泛，以上介绍的属性基本能解决大多数业务场景的饼图展示，本篇介绍到此位置，若要展示一些更为复杂的饼图，欢迎留言探讨。
以上就是Vue+Echarts绘制饼图的示例详解的详细内容，更多关于Vue Echarts饼图的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了vue多页面项目实现版本快照功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家详细介绍了vue实现图片滑动验证功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要介绍了Vue实现路由跳转至外界页面方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
由于添加门店时，需要选择门店的省、市、区、详细地址、以及门店的经纬度信息，本文给大家分享Vue集成百度地图实现位置选择功能，感兴趣的朋友一起看看吧2022-06-06
这篇文章主要为大家详细介绍了vue-drawer-layout实现手势滑出菜单栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了vue中axios的post请求,415错误的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
今天小编就为大家分享一篇在Vue项目中,防止页面被缩放和放大示例，具有很好的参考 价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
众所周知组合式API是一系列API的集合,使我们可以使用函数而不是声明选项的方式书写Vue组件,这篇文章主要给大家介绍了关于Vue组合式API的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了Vue.js手风琴菜单组件开发实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了vue-router路由懒加载及实现方式,路由懒加载的主要作用是将 路由对应的组件打包成一个个的js代码块，只有在这个路由被访问到的时候，才会加载对应组件的代码块，需要的朋友可以参考下2022-12-12
最新评论