echarts项目中真实遇到的修改

在这里插入图片描述

这是现在的,然后指示线透明了需要将他给还原成实线下面是代码


        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);
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值