• 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. },

     

  • 相关阅读:
    【教3妹学编辑-mysql】详解join(内连接、外连接、交叉连接等)
    linux0.11-虚拟内存
    数据集划分:手动划分文件夹中的图片数据集为训练集、验证集和测试集
    应用案例|基于三维机器视觉的曲轴自动化上下料应用方案
    vue项目打包成.exe桌面应用
    C#创建并调用dll
    细分图中的可到达节点 : 常规最短路运用题
    【linux】详解TOP命令
    Java实现截取视频第一帧
    华为配置旁挂三层组网直接转发示例
  • 原文地址:https://blog.csdn.net/weixin_50885665/article/details/132739688