饼状图配置项

 echarts2() {
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom);
      var option;
      let piedata = [];//饼图数据
      if (this.piedata !== null) {
        this.piedata.forEach((item) => {
          piedata.push({
            value: item.value,
            name: item.name,
            itemStyle: {
              borderWidth: 1,//给饼图中每一小块添加边框
              borderColor: "white",//黑饼图中每一个小块的边框设置边框颜色
            },
          });
        });
      }

      option = {
        grid: {
          width: "200px",
          height: "150px",
        },
        color: [//修改饼图的显示颜色
          "#37a2da",
          "#32c5e9",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#fb7293",
          "#e7bcf3",
          "#8378ea",
        ],
        tooltip: {//是否显示提示框组件
          show: true,
          // extraCssText: "width:300px;height:40px;line-height:20px;background:#fffff;", //修改提示框大小
          trigger: "item",
          formatter: "{b} : {c} 公里",
        },
        legend: {
             orient: 'vertical',//设置底部文字横向或者纵向显示 'horizontal' 横向'vertical'纵向
          itemWidth: 10,//设置底部文字前边icon的宽度
          itemHeight: 10,//设置底部文字前变icon的高度
          bottom: 60, //设置底部文字的位置
          icon: "circle",//设置底部文字前icon的形状(可以每一个都试试)    'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
          left: "center",
          textStyle: {
            fontSize: 15,//设置文字大小
          },
        },
        series: [
          {
            type: "pie",//设置图表类型
            radius: "60%", //控制图表大小
            center: ["50%", "35%"], //控制图表位置 第一个参数是左右   第二个参数是上下
            selectedMode: "single",
            labelLine: {
              show: true, //隐藏指示线
            },

            label: {
              //  position: "inside",//让文字显示在饼状图里面
              textStyle: {
                fontSize: 15,
                color: "#000",
                // backgroundColor:"#ffff"
              },
            },
            data: piedata,//饼图的数据
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值