echarts 环形图中间显示文字

va8zu9ts

已于 2024-02-26 11:02:35 修改

阅读量1k

点赞数 2

文章标签：前端 javascript vue.js

于 2023-08-11 10:20:07 首次发布

本文链接：https://blog.youkuaiyun.com/m0_70265923/article/details/132225560

版权

文章介绍了如何使用ECharts库在JavaScript中创建一个动态交互的饼图，包括鼠标悬停时的数据切换和高亮功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

diagramChart() {
  const chartDom = this.$refs.maingc;
  const myChart = echarts.init(chartDom);
  let index = 0;
  setTimeout(() => {
    myChart.dispatchAction({
      type: "highlight",
      dataIndex: 0, //默认选中第一个
    });
  }, 0);
  myChart.on("mouseover", (e) => {
    if (e.dataIndex != index) {
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: index,
      });
    }
  });
  myChart.on("mouseout", (e) => {
    index = e.dataIndex;
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: e.dataIndex,
    });
  });
  let option;
  option = {
    color: [
      "#ff5555",
      "#6f3dff",
      "#306fdc",
      "#55a3ff",
      "#81e2ff",
      "#00c378",
      "#79c300",
      "#ffa246",
      "#ffd88d",
    ],
    tooltip: {
      show: false,
    },
    legend: {
      y: "bottom",
      orient: "horizontal",
      icon: "rect",
      itemHeight: 12,
      itemWidth: 12,
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["40%", "53%"],
        avoidLabelOverlap: true,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            formatter: (params) => {
              let { value, name, percent } = params;
              return [
                `{value1| ${value + "亿元"}}`,
                `{empty| ""}`,
                `{value2| ${name}}`,
                `{empty| ""}`,
                `{value3| ${percent + "%"}}`,
              ].join("\n");
            },
            rich: {
              value1: {
                fontSize: 21,
                fontWeight: 900,
                color: "#306fdc",
              },
              value2: {
                fontSize: 13,
                fontWeight: 500,
                color: "rgba(0, 0, 0, 0.60)",
              },
              value3: {
                fontSize: 13,
                fontWeight: 700,
                color: "#000000",
              },
              empty: {
                fontSize: 8,
                fontWeight: 700,
                color: "rgba(0, 0, 0, 0)",
              },
            },
          },
        },
        labelLine: {
          show: true,
        },
        data: [
          { name: "一月", value: 10 },
          { name: "二月", value: 20 },
          { name: "三月", value: 30 },
          { name: "四月", value: 40 },
          { name: "五月", value: 50 },
        ],
      },
    ],
  };
  option && myChart.setOption(option);
},