• echarts 饼图 环形图 lable添加下划线


    1. series: [
    2. {
    3. itemStyle: { borderRadius: 8 },
    4. type: "pie",
    5. radius: ["30%", "50%"],
    6. center: ["50%", "50%"],
    7. roseType: "area",
    8. zlevel: 10,
    9. label: {
    10. normal: {
    11. formatter: function(params) {
    12. if (params.name === "未上市") {
    13. return (
    14. "{a|" + params.name + "}\n" + "{b|" + params.value + "}个"
    15. ); // 自定义标签格式
    16. } else {
    17. return (
    18. "{a|" +
    19. params.name +
    20. "}\n" +
    21. "{b|" +
    22. params.value +
    23. "}个" +
    24. "\n" +
    25. "{c|}"
    26. ); // 自定义标签格式
    27. // return params.name + "\n" + params.value + "个"; // 自定义标签格式
    28. }
    29. },
    30. rich: {
    31. a: {
    32. padding: [0, -12, 20, 0],
    33. fontSize: 16
    34. },
    35. b: {
    36. fontSize: 16
    37. },
    38. c: {
    39. width: 26,
    40. height: 0,
    41. borderWidth: 1,
    42. borderColor: "#636363"
    43. }
    44. },
    45. color: "inherit",
    46. border: "none",
    47. // padding: [0, -62, 50, -62], // 关键代码!关键代码!关键代码!
    48. padding: [0, -42, -10, -42], // 关键代码!关键代码!关键代码!
    49. fontSize: 16
    50. }
    51. },
    52. labelLine: {
    53. normal: {
    54. show: true,
    55. length: 30,
    56. length2: 60
    57. },
    58. emphasis: {
    59. show: false
    60. }
    61. },
    62. data: self.chartData
    63. }
    64. ]

     

     

    1. drawPie(page) {
    2. const self = this;
    3. // 基于准备好的dom,初始化echarts实例
    4. var myChart = this.$echarts.init(document.getElementById("areaPie"));
    5. // 指定图表的配置项和数据
    6. const option = {
    7. color: [
    8. "#F86464",
    9. "#19DC7C",
    10. "#34A6FE",
    11. "#FA9022",
    12. "#DCDB01",
    13. "#8C70F8",
    14. "#2A4AD1",
    15. "#E76FE3",
    16. "#5032C0",
    17. "#168FB2"
    18. ],
    19. grid: {
    20. containLabel: true,
    21. left: "10%"
    22. },
    23. tooltip: {
    24. trigger: "item",
    25. textStyle: {
    26. fontSize: 14
    27. },
    28. formatter: "{b} : {c} ({d}%)"
    29. },
    30. series: [
    31. {
    32. itemStyle: { borderRadius: 8 },
    33. type: "pie",
    34. radius: ["30%", "50%"],
    35. center: ["50%", "50%"],
    36. roseType: "area",
    37. zlevel: 10,
    38. label: {
    39. normal: {
    40. formatter: function(params) {
    41. if (params.name === "未上市") {
    42. return (
    43. "{a|" + params.name + "}\n" + "{b|" + params.value + "}个"
    44. ); // 自定义标签格式
    45. } else {
    46. return (
    47. "{a|" +
    48. params.name +
    49. "}\n" +
    50. "{b|" +
    51. params.value +
    52. "}个" +
    53. "\n" +
    54. "{c|}"
    55. ); // 自定义标签格式
    56. // return params.name + "\n" + params.value + "个"; // 自定义标签格式
    57. }
    58. },
    59. rich: {
    60. a: {
    61. padding: [0, -12, 20, 0],
    62. fontSize: 16
    63. },
    64. b: {
    65. fontSize: 16
    66. },
    67. c: {
    68. width: 26,
    69. height: 0,
    70. borderWidth: 1,
    71. borderColor: "#636363"
    72. }
    73. },
    74. color: "inherit",
    75. border: "none",
    76. // padding: [0, -62, 50, -62], // 关键代码!关键代码!关键代码!
    77. padding: [0, -42, -10, -42], // 关键代码!关键代码!关键代码!
    78. fontSize: 16
    79. }
    80. },
    81. labelLine: {
    82. normal: {
    83. show: true,
    84. length: 30,
    85. length2: 60
    86. },
    87. emphasis: {
    88. show: false
    89. }
    90. },
    91. data: self.chartData
    92. }
    93. ]
    94. };
    95. // 使用刚指定的配置项和数据显示图表。
    96. myChart.setOption(option, true);
    97. myChart.on("click", "series.pie.label", async function(params) {
    98. self.fundType = params.name;
    99. if (
    100. (params.name == "境内上市" || params.name == "境外上市") &&
    101. self.type == 1
    102. ) {
    103. const param = {
    104. currentPage: page || 1,
    105. pageSize: 10,
    106. state: params.name,
    107. yearAndMonth: sessionStorage.getItem("selectTime")
    108. };
    109. const res = await getDetailDialog("api/zdFunddmp/status/list", param);
    110. self.detailDialogData = res;
    111. self.dialog_visible = true;
    112. }
    113. });
    114. // 窗口缩放后重新调整图标尺寸
    115. window.onresize = function() {
    116. myChart.resize();
    117. };
    118. },

     

  • 相关阅读:
    Java中正则表达式基本语法和简单使用
    echarts文档解读
    μC/OS-II---信号量管理1(os_sem.c)
    帧间快速算法论文阅读
    可下载《2022年中国数字化办公市场研究报告》详解1768亿元市场
    nginx优化和防盗链
    6、【主要组件】Workflow:Workflow管理
    树莓派i2c通讯 设置 和 查看 i2c通信地址方法
    【论文精读】NMP: End-to-end Interpretable Neural Motion Planner
    springbootspringboot杏林中医诊所管理系统133742
  • 原文地址:https://blog.csdn.net/weixin_50885665/article/details/132739688