echarts 饼图动画

已于 2023-03-31 11:34:49 修改
阅读量1.6k 收藏 8
点赞数
分类专栏： echarts 使用 文章标签： echarts 前端 javascript Powered by 金山文档
于 2023-03-23 14:17:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37550440/article/details/129729892
版权
这段代码展示了如何使用ECharts库创建环形图，并实现动态旋转动画效果。数据由多个类别组成，每个类别有不同的颜色，并且图形内部应用了颜色渐变。此外，还包含了自定义标签和图例的设置。
摘要由CSDN通过智能技术生成

效果图：

//做环形图的本质是 radius: ['内半径', '外半径'] 内半径!=0
//画渐变色的原理是：data里面可以设置itemStyle
let angle = 0; //角度，用来做简单的动画效果的

let timerId;
const legend = {
    show: false,
};
const tooltip = {
    show: false,
};
const colors = ['#00fcff', '#4386FA','#4FADFD','#0CD3DB','#646CF9'];
const innerRingColor = {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [0,.3,.6,.8,1].map((offset,index)=>({offset,color:colors[index]})),
    global: false, // 缺省为 false
};
var trafficWay = [
  {
    name: 'Ⅰ类',
    value: 10,
  },
  {
    name: 'Ⅱ类',
    value: 20,
  },
  {
    name: 'Ⅲ类',
    value: 20,
  },
  {
    name: 'Ⅳ类',
    value: 20,
  },
];
var dataArr = [];
for (var i = 0; i < 4; i++) {
  if (i % 2 === 0) {
    dataArr.push({
      name: (i + 1).toString(),
      value: 25,
      itemStyle: {
        normal: {
          color: "#F1B35E",
          borderWidth: 0,
          borderColor: "rgba(0,0,0,0)"
        }
      }
    }, {
      value: 4,
      name: '',
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0,
        },
      },
    })
  } else {
    dataArr.push({
      name: (i + 1).toString(),
      value: 20,
      itemStyle: {
        normal: {
          color: "#F1B35E",
          borderWidth: 0,
          borderColor: "rgba(0,0,0,0)"
        }
      }
    }, {
      value: 4,
      name: '',
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0,
        },
      },
    })
  }

}

var data = [];
var color = ['#56FFD7', '#6DA7FF', '#2B64FF', '#68FF83', '#8792FF', '#F6FD6A'];
for (var i = 0; i < trafficWay.length; i++) {
  data.push(
    {
      value: trafficWay[i].value,
      name: trafficWay[i].name,
      itemStyle: {
        normal: {
          borderWidth: 5,
          shadowBlur: 2,
          borderColor: color[i],
          shadowColor: color[i],
        },
      },
    },
    {
      value: 2,
      name: '',
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0,
        },
      },
    }
  );
}
option = {
    color:colors,
    tooltip,
    legend,

    series: [
        {
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [119, 124],
    hoverAnimation: false,
    labelLine: {
      normal: {
        length: 10,
        length2: 14,
      }
    },
    label: {
      show: false,
      position: 'outer',
      alignTo: 'labelLine',
      // ·圆点
      backgroundColor: 'auto',
      height: 0,
      width: 0,
      lineHeight: 0,
      distanceToLabelLine: 0,
      borderRadius: 2.5,
      padding: [2.5, -2.5, 2.5, -2.5],
      formatter: function (params) {
        if (params.name !== '') {
          return `{a|${params.name}：}{b|${params.value}个}`;
        } else {
          return '';
        }
      },
      rich: {
        a: {
          padding: [0, 0, 0, 10],
          color: '#fff'
        },
        b: {
          padding: [0, 10, 0, 0],
          color: '#fff'
        },
      }
    },
    data: data,
  },
   {
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['50%', '50%'],
            radius: ['30%', '30%'],
            label:{
                show:false
            },
            data: [{
                value: 2,
                name: '',
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        borderColor: '#61bad3'
                    }
                }
            }]
        },
       /*  {
            name: '',
            type: 'pie',
            center: ['50%', '50%'], //圆心的位置
            radius: ['32%', '35%'], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
            avoidLabelOverlap: false, //做同心圆用到
            clockwise: false, //顺时针排列
            startAngle: 90, //起始角度 影响不大
            label: {
                show: true, //false不显示饼图上的标签
                position: 'center', //inside（在饼图上显示）,outside(默认就会出现引导线) center
                formatter: '{d}%',
                fontSize: 50,
                fontWeight: 'bold',
            },

            data: [
                { value: value, name: '完成', itemStyle: { color: innerRingColor, opacity: 1 } },
                { value: 100 - value, name: '未完成', itemStyle: { color: '#282c40' } },
            ].sort((a, b) => b.value - a.value), //数组从大到小排序

            emphasis: {
                scale: false,
               
            },
        }, */
       /*  {
            name: '',
            type: 'pie',
            center: ['50%', '50%'], //圆心的位置
            radius: ['40%', '50%'], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
            avoidLabelOverlap: false, //做同心圆用到
            clockwise: false, //顺时针排列
            startAngle: 90, //起始角度 影响不大

            label: {
                show: false, //false不显示饼图上的标签
               
            },

            data: [
                { value: value, name: '完成',  itemStyle: { color: innerRingColor, opacity: 1 }},
                { value: 100 - value, name: '未完成', itemStyle: { color: '#282c40' }  },
            ].sort((a, b) => b.value - a.value), //数组从大到小排序

            emphasis: {
                scale: false,
               
            },
        }, */
        //colors[0]line
        {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
                        startAngle: ((0 + angle) * Math.PI) / 180,
                        endAngle: ((90 + angle) * Math.PI) / 180,
                    },
                    style: {
                        stroke: colors[0],
                        fill: 'transparent',
                        lineWidth: 1.5,
                    },
                    silent: true,
                };
            },
            data: [0],
        },
        {
            name: 'ring5', //        //colors[0]dot
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6;
                let point = getCirlPoint(x0, y0, r, 90 + angle);
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4,
                    },
                    style: {
                        stroke: colors[0], 
                        fill: colors[0],
                    },
                    silent: true,
                };
            },
            data: [0],
        },
        // 蓝色

        {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
                        startAngle: ((180 + angle) * Math.PI) / 180,
                        endAngle: ((270 + angle) * Math.PI) / 180,
                    },
                    style: {
                        stroke: colors[1],
                        fill: 'transparent',
                        lineWidth: 1.5,
                    },
                    silent: true,
                };
            },
            data: [0],
        },
        {
            name: 'ring5', // 蓝色
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6;
                let point = getCirlPoint(x0, y0, r, 180 + angle);
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4,
                    },
                    style: {
                        stroke: colors[1], //绿
                        fill: colors[1],
                    },
                    silent: true,
                };
            },
            data: [0],
        },

        {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                        startAngle: ((270 + -angle) * Math.PI) / 180,
                        endAngle: ((40 + -angle) * Math.PI) / 180,
                    },
                    style: {
                        stroke: colors[2],
                        fill: 'transparent',
                        lineWidth: 1.5,
                    },
                    silent: true,
                };
            },
            data: [0],
        },
        // 橘色

        {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                        startAngle: ((90 + -angle) * Math.PI) / 180,
                        endAngle: ((220 + -angle) * Math.PI) / 180,
                    },
                    style: {
                        stroke: colors[2],
                        fill: 'transparent',
                        lineWidth: 1.5,
                    },
                    silent: true,
                };
            },
            data: [0],
        },
        {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
                let point = getCirlPoint(x0, y0, r, 90 + -angle);
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4,
                    },
                    style: {
                        stroke: colors[3], //粉
                        fill: colors[3],
                    },
                    silent: true,
                };
            },
            data: [0],
        },
        {
            name: 'ring5', //绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
                let point = getCirlPoint(x0, y0, r, 270 + -angle);
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4,
                    },
                    style: {
                        stroke: colors[3], //绿
                        fill: colors[3],
                    },
                    silent: true,
                };
            },
            data: [0],
        },
    ],
};

//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
    let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
    let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
    return {
        x: x1,
        y: y1,
    };
}

function draw() {
    angle = angle + 3;
    myChart.setOption(option, true);
    //window.requestAnimationFrame(draw);
}
draw();
setTimeout(function () {
    if (timerId) {
        clearInterval(timerId);
    }
    timerId = setInterval(function () {
        //用setInterval做动画感觉有问题
        draw();
    }, 100);
}, 500);

  1. 更完善的版本

效果图：

safeEchart() {
      //做环形图的本质是 radius: ['内半径', '外半径'] 内半径!=0
      //画渐变色的原理是：data里面可以设置itemStyle
      let angle = 0; //角度，用来做简单的动画效果的
      let widthCustom = 700;
      let timerId;

      const tooltip = {
        show: false,
      };
      const colors = [
        "#00fcff",
        "#00c1ff",
        "#ef9c00",
        "#00ff84",
      ];
      const innerRingColor = {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [0, 0.3, 0.6, 0.8, 1].map(
          (offset, index) => ({
            offset,
            color: colors[index],
          })
        ),
        global: false, // 缺省为 false
      };
      var trafficWay = [
        {
          name: "风险区",
          value: 1492,
        },
        {
          name: "两重点一重大",
          value: 1492,
        },
        {
          name: "危化品",
          value: 1492,
        },
        {
          name: "固定动火点",
          value: 1492,
        },
      ];
      let legend = [];
      let item = {
        top: 100,
        right: 600,
        itemWidth: 40,
        itemHeight: 40,
        textStyle: {
          fontSize: 16,
          color: "rgba(255,255,255,1)",
          rich: {
            name: {
              fontSize: 38,
              padding: [0, 0, 100, 0], //上，右，下，左
              color: "",
            },
            value: {
              fontSize: 60,
              fontFamily: "PangMenZhengDao",
              padding: [-8, -50],
            },
            unit: {
              fontSize: 36,
              verticalAlign: "bottom",
              padding: [0, 0, 0, 50],
              color: "#fff",
            },
          },
        },
        formatter: function(params) {
          // console.log(params)
          // return [`{name|${'风险区'}}`, `{value|${123124}}`].join('\n')
        },
        data: [""],
      };
      const deepCopy = (newObj, oldObj) => {
        for (let k in oldObj) {
          var item = oldObj[k];
          if (item instanceof Array) {
            newObj[k] = [];
            deepCopy(newObj[k], item);
          } else if (item instanceof Object) {
            newObj[k] = {};
            deepCopy(newObj[k], item);
          } else {
            newObj[k] = item;
          }
        }
      };
      for (let i = 0; i < trafficWay.length; i++) {
        if (i == 0) {
          let item1 = {};
          deepCopy(item1, item);
          item1.right = 500;
          item1.textStyle.rich.name.color = "#00fcff";
          item1.formatter = function() {
            return [
              `{name|${trafficWay[i].name}}`,
              ``,
              ``,
              ``,
              `{value|${trafficWay[i].value}}{unit|个}`,
            ].join("\n");
          };
          item1.data = [`${trafficWay[i].name}`];
          legend[i] = item1;
        } else if (i == 1) {
          let item1 = {};
          deepCopy(item1, item);
          item1.right = 50;
          item1.textStyle.rich.name.color = "#00c1ff";
          item1.formatter = function() {
            return [
              `{name|${trafficWay[i].name}}`,
              ``,
              ``,
              ``,
              `{value|${trafficWay[i].value}}{unit|个}`,
            ].join("\n");
          };
          item1.data = [`${trafficWay[i].name}`];
          legend[i] = item1;
        } else if (i == 2) {
          let item1 = {};
          for (var j in item) {
            item1[j] = item[j];
          }
          item1.right = 500;
          item1.top = 400;
          item1.textStyle.rich.name.color = "#ef9c00";
          item1.formatter = function() {
            return [
              `{name|${trafficWay[i].name}}`,
              ``,
              ``,
              ``,
              `{value|${trafficWay[i].value}}{unit|个}`,
            ].join("\n");
          };
          item1.data = [`${trafficWay[i].name}`];
          legend[i] = item1;
        } else if (i == 3) {
          let item1 = {};
          deepCopy(item1, item);
          item1.right = 100;
          item1.top = 400;
          item1.textStyle.rich.name.color = "#00ff84";
          item1.formatter = function() {
            return [
              `{name|${trafficWay[i].name}}`,
              ``,
              ``,
              ``,
              `{value|${trafficWay[i].value}}{unit|个}`,
            ].join("\n");
          };
          item1.data = [`${trafficWay[i].name}`];
          legend[i] = item1;
        }
      }

      var dataArr = [];
      for (var i = 0; i < 4; i++) {
        if (i % 2 === 0) {
          dataArr.push(
            {
              name: (i + 1).toString(),
              value: 15,
              itemStyle: {
                normal: {
                  color: "#F1B35E",
                  borderWidth: 0,
                  borderColor: "rgba(0,0,0,0)",
                },
              },
            },
            {
              value: 1,
              name: "",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 0,
                },
              },
            }
          );
        } else {
          dataArr.push(
            {
              name: (i + 1).toString(),
              value: 20,
              itemStyle: {
                normal: {
                  color: "#F1B35E",
                  borderWidth: 0,
                  borderColor: "rgba(0,0,0,0)",
                },
              },
            },
            {
              value: 4,
              name: "",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 0,
                },
              },
            }
          );
        }
      }

      var data = [];
      var color = [
        "#00fcff",
        "#00c1ff",
        "#ef9c00",
        "#00ff84",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 2,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 200,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }

      let option = {
        color: colors,
        tooltip,
        legend,
        title: [
          {
            text: "5236", //主标题
            left: "20%", //标题的位置 默认是left，其余还有center、right属性
            top: "40%",
            textStyle: {
              color: "#ef9c00",
              fontSize: 70,
              fontWeight: "bold",
              fontFamily: "PangMenZhengDao",
            },
          },
          {
            subtext: "总数", //副标题
            // itemGap: 6, //主副标题间距
            left: "24%", //标题的位置 默认是left，其余还有center、right属性
            top: "50%",
            subtextStyle: {
              color: "#FFFFFF",
              fontSize: 38,
              fontWeight: "600",
              letterSpacing: 10,
              textAlign: "center",
            },
          },
        ],
        series: [
          {
            name: "",
            type: "pie",
            clockWise: false,
            center: ["27%", "50%"],
            radius: [149, 164],
            hoverAnimation: false,
            labelLine: {
              normal: {
                length: 10,
                length2: 14,
              },
            },
            label: {
              show: false,
              position: "outer",
              alignTo: "labelLine",
              // ·圆点
              backgroundColor: "auto",
              height: 0,
              width: 0,
              lineHeight: 0,
              distanceToLabelLine: 0,
              borderRadius: 2.5,
              padding: [2.5, -2.5, 2.5, -2.5],
              formatter: function(params) {
                if (params.name !== "") {
                  return `{a|${params.name}：}{b|${params.value}个}`;
                } else {
                  return "";
                }
              },
              rich: {
                a: {
                  padding: [0, 0, 0, 10],
                  color: "#fff",
                },
                b: {
                  padding: [0, 10, 0, 0],
                  color: "#fff",
                },
              },
            },
            data: data,
          },
          {
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ["27%", "50%"],
            radius: ["32%", "32%"],
            label: {
              show: false,
            },
            data: [
              {
                value: 2,
                name: "",
                itemStyle: {
                  normal: {
                    borderWidth: 2,
                    borderColor: "#61bad3",
                  },
                },
              },
            ],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function(params, api) {
              return {
                type: "arc",
                shape: {
                  cx: widthCustom / 2,
                  cy: api.getHeight() / 2,
                  r:
                    (Math.min(
                      api.getWidth(),
                      api.getHeight()
                    ) /
                      2) *
                    0.6,
                  startAngle: ((0 + angle) * Math.PI) / 180,
                  endAngle: ((90 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: colors[0],
                  fill: "transparent",
                  lineWidth: 4.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5", //        //colors[0]dot
            type: "custom",
            coordinateSystem: "none",
            renderItem: function(params, api) {
              let x0 = widthCustom / 2;
              let y0 = api.getHeight() / 2;
              let r =
                (Math.min(api.getWidth(), api.getHeight()) /
                  2) *
                0.6;
              let point = getCirlPoint(
                x0,
                y0,
                r,
                90 + angle
              );
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: colors[0],
                  fill: colors[0],
                },
                silent: true,
              };
            },
            data: [0],
          },
          // 蓝色

          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function(params, api) {
              return {
                type: "arc",
                shape: {
                  cx: widthCustom / 2,
                  cy: api.getHeight() / 2,
                  r:
                    (Math.min(
                      api.getWidth(),
                      api.getHeight()
                    ) /
                      2) *
                    0.6,
                  startAngle:
                    ((180 + angle) * Math.PI) / 180,
                  endAngle: ((270 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: colors[1],
                  fill: "transparent",
                  lineWidth: 4.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5", // 蓝色
            type: "custom",
            coordinateSystem: "none",
            renderItem: function(params, api) {
              let x0 = widthCustom / 2;
              let y0 = api.getHeight() / 2;
              let r =
                (Math.min(api.getWidth(), api.getHeight()) /
                  2) *
                0.6;
              let point = getCirlPoint(
                x0,
                y0,
                r,
                180 + angle
              );
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: colors[1], //绿
                  fill: colors[1],
                },
                silent: true,
              };
            },
            data: [0],
          },

          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function(params, api) {
              return {
                type: "arc",
                shape: {
                  cx: widthCustom / 2,
                  cy: api.getHeight() / 2,
                  r:
                    (Math.min(
                      api.getWidth(),
                      api.getHeight()
                    ) /
                      2) *
                    0.65,
                  startAngle:
                    ((270 + -angle) * Math.PI) / 180,
                  endAngle: ((40 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: colors[2],
                  fill: "transparent",
                  lineWidth: 4.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          // 橘色

          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function(params, api) {
              return {
                type: "arc",
                shape: {
                  cx: widthCustom / 2,
                  cy: api.getHeight() / 2,
                  r:
                    (Math.min(
                      api.getWidth(),
                      api.getHeight()
                    ) /
                      2) *
                    0.65,
                  startAngle:
                    ((90 + -angle) * Math.PI) / 180,
                  endAngle:
                    ((220 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: colors[2],
                  fill: "transparent",
                  lineWidth: 4.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function(params, api) {
              let x0 = widthCustom / 2;
              let y0 = api.getHeight() / 2;
              let r =
                (Math.min(api.getWidth(), api.getHeight()) /
                  2) *
                0.65;
              let point = getCirlPoint(
                x0,
                y0,
                r,
                90 + -angle
              );
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: colors[3], //粉
                  fill: colors[3],
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5", //绿点
            type: "custom",
            coordinateSystem: "none",
            renderItem: function(params, api) {
              let x0 = widthCustom / 2;
              let y0 = api.getHeight() / 2;
              let r =
                (Math.min(api.getWidth(), api.getHeight()) /
                  2) *
                0.65;
              let point = getCirlPoint(
                x0,
                y0,
                r,
                270 + -angle
              );
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: colors[3], //绿
                  fill: colors[3],
                },
                silent: true,
              };
            },
            data: [0],
          },
        ],
      };

      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      let getCirlPoint = (x0, y0, r, angle) => {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
        return {
          x: x1,
          y: y1,
        };
      };

      let myChart = this.$echarts.init(
        document.getElementById("safeId")
      );
      let draw = () => {
        angle = angle + 3;
        myChart.setOption(option, true);
        //window.requestAnimationFrame(draw);
      };
      draw();
      setTimeout(function() {
        if (timerId) {
          clearInterval(timerId);
        }
        timerId = setInterval(function() {
          //用setInterval做动画感觉有问题
          draw();
        }, 100);
      }, 500);
    },
流氓也是种气质 _Cookie
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts饼图（带动画效果）
God's asylum的博客
05-19 857
1、外围圆环运用仪表盘gauge，设置仪表盘的起始角度“startAngle”，和终止角度“endAngle”，设置仪表盘最小值“min”和最大值“max”属性来确定仪表盘数值大小， 隐藏仪表盘指针‘pointer’，隐藏detail，设置仪表盘外维宽度和颜色“axisLine”，隐藏刻度“axisTick”，设置进度条progress属性，隐藏刻度标签“axisLabel”，itemStyle属性设置渐变色 2、中间旋转的轮毂也是运用仪表盘来制作的，将仪表盘其他属性隐藏只保留刻度线，给刻度线添加阴影，动态
echart 饼图动画（饼图自动高亮展示）
zhumizhumi的博客
03-07 7971
可以直接粘贴使用 一：饼图动画效果 二：动画效果要求 （1）鼠标不移动上去得时候，饼图自动按照顺序高亮 （2）鼠标移入的时候，取消自动高亮展示，只高亮鼠标选中的那一块 （3）鼠标移出的时候，恢复自动高亮的代码 三：代码 var _this = this var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 var charPie3cur...
Echarts饼图-实现今日进度-动态图
最新发布
No_Name_Cao_Ni_Mei的博客
06-21 1386
构建一个动态饼图，采用ECharts，背景为蓝色科技风，有星球转动效果。通过`echarts.init`初始化，设置图表尺寸和背景色，配置`option`对象含标题、颜色等。利用`series`定义渐变色并自定义渲染，通过`renderItem`绘制弧线和圆点。`getCirlPoint`函数计算坐标，`draw`函数更新角度实现动画。代码包括图表初始化、系列配置、动画逻辑等关键部分。完整代码可在链接处下载。
基于echarts制作饼图动画
qq_45752346的博客
01-18 734
【代码】基于echarts制作饼图动画。
echart 动画 饼图_巧用EChart画动态饼图
weixin_36199877的博客
12-23 1440
生物信息学领域算法对于解决复杂生物学问题非常重要，随着NGS的发展对于算法需求也越来越多，同时也伴随着对数据可视化的需求的增加。以下小编将为大家介绍一种非常实用的动态可视化方法---Echarts，一个纯 Javascript 的图表库，可以在PC和移动设备上流畅运行，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖轻量级的 Canvas 类...
绘制饼图并实现动画效果
10-26
使用svg，js实现饼图的制作以及动画效果
echarts饼图扇区添加点击事件的实例
08-29
下面是一个基本的ECharts饼图配置示例： ```javascript var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '饼图示例' }, tooltip: { trigger: 'item', ...
echarts饼图自动切换代码
08-28
在这个项目中，"echarts饼图自动切换代码" 说明了作者实现了饼图的动态切换功能，这通常用于展示不同类别数据的比例分布，并且能够自动在不同的数据状态间进行切换，以提供更直观的数据观察体验。 要实现饼图的自动...
echarts饼图自动动画_echarts饼图定时自动切换
weixin_39611047的博客
12-22 1333
pie_chart.js文件内容如下var domchart = document.getElementById("mychart");var domtitle = document.getElementById("mytitle");var myindex = 0;var mycolor = ['red','green','purple','blue', 'black','pink'];func...
echarts饼图动画
08-17
综上所述，Echarts饼图动画通过不同类型的动画效果，使得数据的展示更加生动直观，提高了用户的数据理解能力。无论是入场动画、交互动画还是数据更新动画，都可以通过Echarts提供的配置项来自定义。这使得开发者可以...
Java Script Echarts动态饼图
03-29
柱状图、饼图比例展示，根据年份自动变化，饼图柱状图相互切换。
Echarts图——饼图动态
qq_44891434的博客
03-10 3024
Echarts图——饼图动态 代码 <template> <div style="width: 100%; height: 100%" id="chartsL"></div> </template> <script> import echarts from "echarts"; export default { mounted() { this.drawLine(); }, methods: { drawLin.
echarts饼图自动动画_echarts实时旋转饼图效果特效
weixin_35323111的博客
01-16 3905
option = {backgroundColor: '#142468',title:{//text: '实时旋转饼图'},series: [{type: 'pie',zlevel: 1,silent: true,/*radius饼图的半径。可以为如下类型：number：直接指定外半径值。string：例如，'20%'，表示外半径为可视区尺寸(容器高宽中较小一项)的 20% 长度。Array.：数...
canvas rotate 累加旋转_canvas绘制饼图的方法介绍(代码)
weixin_39663933的博客
11-22 230
本篇文章给大家带来的内容是关于canvas绘制饼图的方法介绍(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一. 任务说明使用原生canvasAPI绘制饼图(南丁格尔玫瑰)。(截图以及数据来自于百度Echarts官方示例库【查看示例链接】)。二. 重点提示南丁格尔玫瑰图的画法有很多种，Echarts中提供的以半径或面积两种不同模式，本文中以面积比例画法为例，绘制算法如下：确...
echarts 饼图（加载进度条动画效果）
God's asylum的博客
05-19 721
1、外侧动画细线效果运动“custom”自定义系列中“renderItem”属性来实现，动态修改起始角度和终止角度。2、圆环使用" pie "类型添加两个data值来画百分比圆环，动态修改data中的值。
在echarts中实现饼图、圆环过渡动画
qq_44866810的博客
06-20 1255
在echarts中实现饼图、圆环过渡动画
echarts饼图 外圈转动动画 pie
zk_1325572803的博客
10-12 8401
就是这个东西，会围着饼图转动 不知道怎么弄成gif 只能看图片了 见谅 准备：两个div，一个装饼图，一个装那个转圈的。。。这里就只写转圈的了，饼图就不写了 js代码： showpieLinex(); function showpieLinex(){ var myChartLine = echarts.init(document.getElementById('toprigh...
动态渲染 echarts 饼图（vue 2 + axios + Springboot）
m0_54355172的博客
09-11 2791
echarts + axios + springboot 综合案例，保姆级教程
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值