当前位置:   article > 正文

Echarts饼状图-柱状图点击事件_并状图 点击事件

并状图 点击事件

1、饼状图

  1. var chart = this.$charts.chart("chartBox", {
  2. chart: {
  3. type: "pie",
  4. backgroundColor: "transparent",
  5. options3d: {
  6. enabled: true,
  7. alpha: 30,
  8. },
  9. spacing: [0, 0, 0, 0],
  10. },
  11. title: {
  12. verticalAlign: "middle", //标题在环的中间显示
  13. text: this.total,//总数
  14. style: {
  15. fontSize: "18px",
  16. color: "#ffffff",
  17. },
  18. },
  19. tooltip: {
  20. pointFormat: "{series.name}:{point.percentage:.2f}%",
  21. style: {
  22. fontSize: "14px",
  23. color: "#000000",
  24. },
  25. },
  26. plotOptions: {
  27. pie: {
  28. point: {
  29. events: {
  30. click: function (event) {
  31. // 在这里添加点击事件的处理逻辑
  32. console.log("点击了饼图:", event.point.name, event.point.y);
  33. },
  34. },
  35. },
  36. allowPointSelect: true,
  37. cursor: "pointer",
  38. showInLegend: false,
  39. innerSize: 60,
  40. depth: 30,
  41. dataLabels: {
  42. enabled: false,
  43. format: "<b>{point.name}</b>: {point.percentage:.1f} %",
  44. style: {
  45. color:
  46. (this.$charts.theme &&
  47. this.$charts.theme.contrastTextColor) ||
  48. "black",
  49. },
  50. },
  51. },
  52. },
  53. credits: {
  54. enabled: false,
  55. },
  56. exporting: {
  57. enabled: false,
  58. },
  59. colors: ["#00FFFF", "#00B7EE", "#007BEE", "#00EEA2", "#8DE022"],
  60. series: [
  61. {
  62. name: "",
  63. data: this.info,//数据
  64. },
  65. ],
  66. })

2、柱状图

  1. const chartDom = document.getElementById("chartBox")
  2. var myChart = this.$echarts.init(chartDom)
  3. myChart.resize()
  4. var option
  5. option = {
  6. grid: {
  7. top: "10",
  8. bottom: "20",
  9. left: "50",
  10. right: "40",
  11. },
  12. xAxis: {
  13. type: "value",
  14. axisLine: { show: false },
  15. axisTick: { show: false },
  16. axisLabel: { show: false },
  17. splitLine: { show: false },
  18. },
  19. label: {
  20. position: "right",
  21. show: true,
  22. },
  23. yAxis: {
  24. type: "category",
  25. data: ["标题1", "标题", "标题", "标题", "标题"],
  26. axisLine: { show: false },
  27. axisTick: { show: false },
  28. axisLabel: {
  29. color: "#ffffff",
  30. },
  31. },
  32. series: [
  33. {
  34. data: this.data,//数据
  35. type: "bar",
  36. showBackground: true,
  37. backgroundStyle: {
  38. color: "#e4e7ed",
  39. },
  40. backgroundStyle: {
  41. color: "rgba(180, 180, 180, 0.2)",
  42. },
  43. itemStyle: {
  44. normal: {
  45. barWidth: 20, // 每个柱子的宽度
  46. },
  47. },
  48. },
  49. ],
  50. }
  51. myChart.on('click', function(params) {
  52. console.log('点击了柱状图:', params.name,params.data);
  53. });
  54. option && myChart.setOption(option)

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
  

闽ICP备14008679号