echarts圆形图

原创

小哥 3年前 (2022-11-10) 阅读数 51 #大杂烩

var colorLine = [
  #33C0CD,
  #73ACFF,
  #9E87FF,
  #FE6969,
  #FDB36A,
  #FECE43
];
var colorList = [
  rgb(135, 162, 251),
  rgb(91, 133, 241),
  rgb(143, 197, 231)
];
let dataList = [
  {
    name: 延缓,
    value: 2482
  },
  {
    name: 进行中,
    value: 1241
  },
  {
    name: 完成整改,
    value: 282
  }
];
option = {
  series: [
    {
      type: pie,
      radius: [44%, 63%],
      center: [50%, 50%],
      // clockwise: true,
      // avoidLabelOverlap: true,
      label: {
        show: true,
        position: outside,
        formatter: function (params) {
          // console.log(params);
          const name = params.name;
          const percent = params.percent + %;
          const index = params.dataIndex;
          return [
            {a|${percent}}
            //   {x|${params.name}}{x|${params.value}项},
          ].join(

); }, rich: { a: { color: #000, lineHeight: 22, fontSize: 16, fontWeight: 700 }, x: { fontSize: 13, fontFamily: Microsoft YaHei, borderColor: #449933, borderRadius: 4, color: rgb(144, 144, 144) } } }, // formatter: [ // {a|此文本的样式a}, // {b|此文本的样式b}此段落使用默认样式{x|此样式x} // ].join( ), emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: rgba(0, 0, 0, 0.5) } },

      itemStyle: {
        normal: {
          color: function (params) {
            return colorList[params.dataIndex];
          }
        }
      },
      data: dataList,

      labelLine: {
        normal: {
          show: true,
          length: 30
        }
      },
      roseType: radius
    }
  ]
};

var echarts = require(echarts);

var chartDom = document.getElementById(main);
var myChart = echarts.init(chartDom);
var option;

var colorLine = [
  #33C0CD,
  #73ACFF,
  #9E87FF,
  #FE6969,
  #FDB36A,
  #FECE43
];
var colorList = [
  rgb(135, 162, 251),
  rgb(91, 133, 241),
  rgb(143, 197, 231)
];
let dataList = [
  {
    name: 延缓,
    value: 2482
  },
  {
    name: 进行中,
    value: 1241
  },
  {
    name: 完成整改,
    value: 282
  }
];
option = {
  series: [
    {
      type: pie,
      radius: [44%, 63%],
      center: [50%, 50%],
      // clockwise: true,
      // avoidLabelOverlap: true,
      label: {
        show: true,
        position: outside,
        formatter: function (params) {
          // console.log(params);
          const name = params.name;
          const percent = params.percent + %;
          const index = params.dataIndex;
          return [
            {a|${percent}}
            //   {x|${params.name}}{x|${params.value}项},
          ].join(

      itemStyle: {
        normal: {
          color: function (params) {
            return colorList[params.dataIndex];
          }
        }
      },
      data: dataList,

      labelLine: {
        normal: {
          show: true,
          length: 30
        }
      },
      roseType: radius
    }
  ]
};

option && myChart.setOption(option);


import echarts from "echarts";
    Issues2() {
      let Issues2 = echarts.init(document.getElementById("Issues2"));
      var colorLine = [
        "#33C0CD",
        "#73ACFF",
        "#9E87FF",
        "#FE6969",
        "#FDB36A",
        "#FECE43",
      ];
      var colorList = [
        "rgb(135, 162, 251)",
        "rgb(91, 133, 241)",
        "rgb(143, 197, 231)",
      ];
      let dataList = [
        {
          name: "延缓",
          value: 2482,
          rate: "40.00%"
        },
        {
          name: "进行中",
          value: 1241,
          rate: "20.00%"
        },
        {
          name: "完成整改",
          value: 2482,
          rate: "40.00%"
        },
      ];
      Issues2.setOption({
        series: [
          {
            type: "pie",
            radius: ["44%", "63%"],
            center: ["50%", "50%"],
            clockwise: true,
            avoidLabelOverlap: true,
            label: {
              show: true,
              position: "outside",
              formatter: function (params) {
                // console.log(params);
                const name = params.name;
                const percent = params.percent+"%" ;
                const index = params.dataIndex;
                return [
                  {a|${percent}},
                  {x|${params.name}}{x|${params.value}项},
                ].join("

"); }, rich: { a: { color: "#000", lineHeight: 22, fontSize: 16, fontWeight: 700, }, x: { fontSize: 13, fontFamily: "Microsoft YaHei", borderColor: "#449933", borderRadius: 4, color: "rgb(144, 144, 144)", }, }, }, // formatter: [ // {a|此文本的样式a}, // {b|此文本的样式b}此段落使用默认样式{x|此样式x} // ].join( ),

            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            data: dataList,
            labelLine: {
              normal: {
                show: false,
              },
            },
            roseType: "radius",
          },
        ],
      });
    },