效果图:
1.首先安装依赖
npm install echarts
npm install echarts-gl
2.mainjs中导入以及挂载
import echarts from 'echarts'
import 'echarts-gl'
Vue.prototype.$echarts = echarts;
3.传入数据生成3D的配置项以及option的配置文章来源:https://www.toymoban.com/news/detail-740301.html
let series = getPie3D(this.optionData, 0);
let option = {
tooltip: {
trigger: "manual",
formatter: (params) => {
if (
params.seriesName !== "pie2d"
) {
return `<div style="padding:0 10px">${params.seriesName}:${(
option.series[params.seriesIndex].pieData.proportion * 100
).toFixed(2)}%</div>`;
}
},
},
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false, //是否显示三维笛卡尔坐标系。
boxHeight: 20, //三维笛卡尔坐标系在三维场景中的高度
top: "-10%",
// environment: "#000", //背景
viewControl: {
alpha: 30, //角度
distance: 300, //调整视角到主体的距离,类似调整zoom 重要
// rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: false, //自动旋转
},
},
series: series,
};
4.指示线的配置文章来源地址https://www.toymoban.com/news/detail-740301.html
option.series.push({
name: "pie2d",
type: "pie",
label: {
color: "#fff",
fontSize: 12,
position: "bottom",
formatter: function (params) {
return `{nameSty|${params.name}:}{valueSty|${params.value}}`;
},
rich: {
nameSty: {
fontSize: 14,
color: "#fff",
},
valueSty: {
fontSize: 14,
color: "#fff",
},
},
// formatter: (item) => {
// // console.log(item)
// return item.data.name + ":" + item.data.value + "";
// },
},
avoidLabelOverlap: false,
labelLine: {
length: 10,
length2: 20,
minTurnAngle: 0,
lineStyle: {
color: "#ffffff",
width: 1,
},
},
startAngle: 340, //起始角度,支持范围[0, 360]。 //重要
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ["40%", "24%"],
center: ["50%", "50%"], // 左右,上下
data: this.optionData,
itemStyle: {
opacity: 0,
},
selectedOffset: 30, // 分离距离
bottom: "4%",
// avoidLabelOverlap: true, //防止标签重叠
});
this.myChartCricleBtmf.setOption(option);
到了这里,关于vue实现echarts3D饼图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!