这是现在的,然后指示线透明了需要将他给还原成实线下面是代码
tooltip: {
trigger: "item",
},
legend: {
data: [//下面的文字说明
{
name: "小汽车",
icon: "image://" + img1 + "",//img1是通过import引入的这样文字说明前面的icon图标就有了
},
{
name: "货车",
icon: "image://" + img2 + "",
},
{
name: "客车",
icon: "image://" + img3 + "",
},
{
name: "危险品",
icon: "image://" + img4 + "",
},
],
show: true,//是否显示文字说明
textStyle: {
color: "#FFFFFF",
},
orient: "horizontal",//文字说明的排列方式当前为横向vertical为竖向
bottom: "10",//调整位置
right: "30%",//文字说明的位置
left: "20%",
},
grid: {
left: "1%",
right: "1%",
bottom: "0",
top: "1%",
containLabel: true,
},
color: ["#4AE861", "#00FFFD", "#3A88FC", "#FFAA23"],//饼图中每个块的颜色
series: [
{
type: "pie",//echarts的类型是什么图
data: this.cartlist.keydsaist,
radius: ["35%", "60%"],//控制了圆环的粗细
center: ["50%", "45%"], //边框位置
emphasis: {
itemStyle: {
show: true,
fontSize: "20",
},
},
label: {
show: true,//指示线的显示呵隐藏
position: "outside",//inside将指示线内容显示在图块上,将所有的指示线内容展示在环型图中心
formatter: "{b}:{d}%",
color: "#fff",
},
labelLine: {
lineStyle: {
color: "#fff", // 改变标示线的颜色
opacity: 1,//指示线的透明度不过本题中不是因为这个
},
},
},
{//罪魁祸首来了仔细看图片其实是有一个透明的圆给挡住了所以就造成了一半透明一半不通明的效果所以只要把这个对象去掉就好了
name: "外边框",
type: "pie",
clockWise: false,
silent: true,
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: ["65%", "65%"], //边框大小
center: ["50%", "45%"], //边框位置
roseType: "radius",
data: [
{
value: 1,
itemStyle: {
normal: {
borderWidth: 23, //设置边框粗细
borderColor: "rgb(1, 43, 95, 0.75)", //边框颜色
},
},
},
],
},
],
};
console.log(option);
chartvehicle.setOption(option);
},