|
|
@@ -133,6 +133,7 @@
|
|
|
showBottomRight(res.data.pattern);
|
|
|
showRightTop(res.data.sales);
|
|
|
showRightMiddle(res.data.channel);
|
|
|
+ showRightBottom(res.data.bom);
|
|
|
}).catch(res=>{
|
|
|
console.log(res)
|
|
|
ElMessage({
|
|
|
@@ -846,14 +847,14 @@
|
|
|
series: [{
|
|
|
type: 'pie',
|
|
|
roseType: 'radius',
|
|
|
- radius: ['20%', '50%'],
|
|
|
+ radius: ['30%', '70%'],
|
|
|
center: ['50%', '50%'],
|
|
|
data: echartData,
|
|
|
hoverAnimation: false,
|
|
|
labelLine: {
|
|
|
normal: {
|
|
|
- length: 3,
|
|
|
- length2: 5,
|
|
|
+ length: 5,
|
|
|
+ length2: 20,
|
|
|
|
|
|
}
|
|
|
},
|
|
|
@@ -893,7 +894,163 @@
|
|
|
}
|
|
|
function showRightMiddle(data){
|
|
|
channelList.value = data;
|
|
|
- }
|
|
|
+ }
|
|
|
+ function showRightBottom(data){
|
|
|
+ var dataList = [];
|
|
|
+ data.forEach(item=>{
|
|
|
+ dataList.push({"name":item.bom,value:item.percentage,num:item.amount});
|
|
|
+ });
|
|
|
+ var colorList = ['#4450BB', '#5F6CE6', '#58C9F7', '#F74D4E', '#FAC231'];
|
|
|
+ var center = ['40%', '50%'];
|
|
|
+ var option = {
|
|
|
+ color: colorList,
|
|
|
+ grid:{
|
|
|
+ top:"5%",
|
|
|
+ left:"1%",
|
|
|
+ right:'1%',
|
|
|
+ bottom:'1%'
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: "", // 主标题文本，支持使用 \n 换行
|
|
|
+ textStyle: {
|
|
|
+ color: "#808080", // 主标题文字的颜色
|
|
|
+ fontSize: 12 // 主标题文字的字体大小
|
|
|
+ },
|
|
|
+ left: "20", // title 组件离容器左侧的距离
|
|
|
+ top: "20" // title 组件离容器上侧的距离
|
|
|
+ },
|
|
|
+ // 提示框组件
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item', // 触发类型
|
|
|
+ show: true, // 是否显示
|
|
|
+ // formatter: function (params) {
|
|
|
+ // var content = params.marker + params.name + " " + params.value + "个";
|
|
|
+ // return content;
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show:false,
|
|
|
+ orient: 'vertial', // 图例列表的布局朝向
|
|
|
+ itemWidth: 16, // 图例标记的图形宽度
|
|
|
+ itemHeight: 16, // 图例标记的图形高度
|
|
|
+ icon: 'circle', // 图例项的 icon
|
|
|
+ right: 50, // 图例组件离容器右侧的距离
|
|
|
+ bottom: '25%', // 图例组件离容器下侧的距离
|
|
|
+ data: dataList, // 图例的数据数组
|
|
|
+ textStyle: { // 图例的公用文本样式
|
|
|
+ color: '#808080' // 文字的颜色
|
|
|
+ },
|
|
|
+ formatter: (name) => { // 用来格式化图例文本
|
|
|
+ const value = dataList.find(item => item.name === name).value
|
|
|
+ return `${name}：${value} 个`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ polar: {
|
|
|
+ center: ["50%", "50%"], // 极坐标系的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
|
|
|
+ radius: ['60%', '60%'] // 极坐标系的半径
|
|
|
+ },
|
|
|
+ radiusAxis: {
|
|
|
+ axisTick: {
|
|
|
+ show: false // 是否显示坐标轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false // 是否显示刻度标签
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false // 是否显示坐标轴轴线
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false // 是否显示分隔线。默认数值轴显示，类目轴不显示
|
|
|
+ },
|
|
|
+ },
|
|
|
+ angleAxis: {
|
|
|
+ type: 'category',
|
|
|
+ z: 10, // 角度轴组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
|
|
|
+ axisTick: {
|
|
|
+ show: false // 是否显示坐标轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false // 是否显示刻度标签
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ width: 10, // 坐标轴线线宽
|
|
|
+ color: '#F3F2F7', // 坐标轴线线的颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ // 外边设置
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ data: [0],
|
|
|
+ coordinateSystem: 'polar',
|
|
|
+ name: '',
|
|
|
+ stack: 'a'
|
|
|
+ },
|
|
|
+ // 展示层
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ center: ["50%", "50%"], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
|
|
|
+ radius: ['20%', '55%'], // 饼图的半径
|
|
|
+ itemStyle: {
|
|
|
+ borderWidth: 2, // 描边线宽
|
|
|
+ borderColor: '#fff', // 图形的描边颜色
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true, // 是否显示
|
|
|
+ position: 'outside', // 标签的位置
|
|
|
+ alignTo: 'labelLine', // 标签的对齐方式
|
|
|
+ backgroundColor: '#fff', // 文字块背景色
|
|
|
+ height: 0, // 文本显示高度
|
|
|
+ width: 0, // 文本显示宽度
|
|
|
+ lineHeight: 0, // 文本显示行高
|
|
|
+ distanceToLabelLine: 5, // 文字与 label line 之间的距离
|
|
|
+ borderRadius: 3, // 文字块的圆角
|
|
|
+ borderWidth: 2, // 文字块边框宽度
|
|
|
+ borderColor: 'auto', // 文字块边框颜色
|
|
|
+ padding: [3, -3, 3, -3], // 文字块的内边距
|
|
|
+ formatter: function (params) { // 标签内容格式器
|
|
|
+ return `{a|${params.name}\n}{b|${params.value}%}`
|
|
|
+ },
|
|
|
+ rich: { // 自定义富文本样式
|
|
|
+ a: {
|
|
|
+ padding: [25, -120, 40, -30], // 边距
|
|
|
+ fontSize: '12px', // 字号
|
|
|
+ color: '#808080', // 字体颜色
|
|
|
+ },
|
|
|
+ b: {
|
|
|
+ padding: [15, -80, 55, 0], // 边距
|
|
|
+ fontSize: '12px', // 字号
|
|
|
+ color: '#808080', // 字体颜色
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 该项悬浮时样式设置
|
|
|
+ tooltip: {
|
|
|
+ show:false,
|
|
|
+ valueFormatter: function (value) { // 数值显示部分的格式化回调函数
|
|
|
+ return value + '个';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false, // 是否显示视觉引导线
|
|
|
+ normal: {
|
|
|
+ length: 30, // 视觉引导线第一段的长度
|
|
|
+ length2: 100, // 视觉引导项第二段的长度
|
|
|
+ align: 'right',
|
|
|
+ lineStyle: {
|
|
|
+ width: 2, // 线宽
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: dataList, // 数据
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ var mychat = echarts.init(rightbottom_echarts.value);
|
|
|
+ mychat.setOption(option);
|
|
|
+ }
|
|
|
onMounted(()=>{
|
|
|
impquery();
|
|
|
})
|
