[关闭]
@liruiyi962464 2024-05-31T07:07:41.000000Z 字数 4833 阅读 82

动态循环环状图中心有字

前端

  1. var angle = 0 //角度，用来做简单的动画效果的
  2.       var currentIndex = 0
  3.       var color = ['#00FDFE', '#00D8FF']
  4.       var legend = ['档口', '仓储']
  6.       var seriesData = [
  7.         { name: '档口', value: 5492 },
  8.         { name: '仓储', value: 6492 },
  9.       ]
  10. option = {
  11.     backgroundColor: "#050e31",
  12.     color: color,
  13.     legend: {
  14.       itemHeight: 14,
  15.       itemWidth: 14,
  16.       icon: "rect",
  17.       orient: 'vertical',
  18.       top: 'center',
  19.       right: 0,
  20.       textStyle: {
  21.          align: 'left',
  22.          verticalAlign: 'middle',
  23.          rich: {
  24.             name: {
  25.                color: '#A0C2BF',
  26.                fontSize:14,
  27.             },
  28.             value: {
  29.                color: '#A0C2BF',
  30.                fontSize: 14,
  31.             },
  32.             rate: {
  33.                color: '#A0C2BF',
  34.                fontSize: 14,
  35.             },
  36.          },
  37.       },
  38.       data: legend,
  39.       formatter: (name) => {
  40.          if (seriesData.length) {
  41.             const item = seriesData.filter((item) => item.name === name)[0];
  42.             return `{name|${name}：}{rate| ${item.value}%} {value| |} {value| ${item.value}}`;
  43.          }
  44.       },
  45.    },
  46.     series: [{
  47.        // 内环线 1
  48.         name: "ring5",
  49.         type: 'custom',
  50.         coordinateSystem: "none",
  51.         renderItem: function (params, api) {
  52.             return {
  53.                 type: 'arc',
  54.                 shape: {
  55.                     cx: api.getWidth() / 2,
  56.                     cy: api.getHeight() / 2,
  57.                     r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.37,// 调整位置
  58.                 },
  59.                 style: {
  60.                     stroke: "#0CD3DB",
  61.                     fill: "transparent",
  62.                     lineWidth: 1
  63.                 },
  64.                 silent: true
  65.             };
  66.         },
  67.         data: [0]
  68.     }, {
  69.         name: "ring5",
  70.         type: 'custom',
  71.         coordinateSystem: "none",
  72.         renderItem: function (params, api) {
  73.             return {
  74.                 type: 'arc',
  75.                 shape: {
  76.                     cx: api.getWidth() / 2,
  77.                     cy: api.getHeight() / 2,
  78.                     r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.52,
  79.                     startAngle: (180 + angle) * Math.PI / 180,
  80.                     endAngle: (270 + angle) * Math.PI / 180
  81.                 },
  82.                 style: {
  83.                     stroke: "#0CD3DB",
  84.                     fill: "transparent",
  85.                     lineWidth: 1.5
  86.                 },
  87.                 silent: true
  88.             };
  89.         },
  90.         data: [0]
  91.     }, {
  92.         name: "ring5",
  93.         type: 'custom',
  94.         coordinateSystem: "none",
  95.         renderItem: function (params, api) {
  96.             return {
  97.                 type: 'arc',
  98.                 shape: {
  99.                     cx: api.getWidth() / 2,
  100.                     cy: api.getHeight() / 2,
  101.                     r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
  102.                     startAngle: (360 + -angle) * Math.PI / 180,
  103.                     endAngle: (80 + -angle) * Math.PI / 180
  104.                 },
  105.                 style: {
  106.                     stroke: "#0CD3DB",
  107.                     fill: "transparent",
  108.                     lineWidth: 1
  109.                 },
  110.                 silent: true
  111.             };
  112.         },
  113.         data: [0]
  114.     }, {
  115.         name: "ring5",
  116.         type: 'custom',
  117.         coordinateSystem: "none",
  118.         renderItem: function (params, api) {
  119.             return {
  120.                 type: 'arc',
  121.                 shape: {
  122.                     cx: api.getWidth() / 2,
  123.                     cy: api.getHeight() / 2,
  124.                     r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
  125.                     startAngle: (180 + -angle) * Math.PI / 180,
  126.                     endAngle: (260 + -angle) * Math.PI / 180
  127.                 },
  128.                 style: {
  129.                     stroke: "#0CD3DB",
  130.                     fill: "transparent",
  131.                     lineWidth: 1.5
  132.                 },
  133.                 silent: true
  134.             };
  135.         },
  136.         data: [0]
  137.     }, {
  138.         name: "ring5",
  139.         type: 'custom',
  140.         coordinateSystem: "none",
  141.         renderItem: function (params, api) {
  142.             let x0 = api.getWidth() / 2;
  143.             let y0 = api.getHeight() / 2;
  144.             let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
  145.             let point = getCirlPoint(x0, y0, r, (180 + -angle))
  146.             return {
  147.                 type: 'circle',
  148.                 shape: {
  149.                     cx: point.x,
  150.                     cy: point.y,
  151.                     r: 2
  152.                 },
  153.                 style: {
  154.                     stroke: "#0CD3DB",//粉
  155.                     fill: "#0CD3DB",
  156.                     lineWidth: 5
  157.                 },
  158.                 silent: true
  159.             };
  160.         },
  161.         data: [0]
  162.     }, {
  163.         name: "ring5",  //绿点
  164.         type: 'custom',
  165.         coordinateSystem: "none",
  166.         renderItem: function (params, api) {
  167.             let x0 = api.getWidth() / 2;
  168.             let y0 = api.getHeight() / 2;
  169.             let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
  170.             let point = getCirlPoint(x0, y0, r, (360 + -angle))
  171.             return {
  172.                 type: 'circle',
  173.                 shape: {
  174.                     cx: point.x,
  175.                     cy: point.y,
  176.                     r: 2
  177.                 },
  178.                 style: {
  179.                     stroke: "#0CD3DB",      //绿
  180.                     fill: "#0CD3DB",
  181.                     lineWidth: 5
  182.                 },
  183.                 silent: true
  184.             };
  185.         },
  186.         data: [0]
  187.     }, {
  188.          name: '占比',
  189.          type: 'pie',
  190.          center: ['50%', '50%'],
  191.          radius: ['40%', '50%'],
  192.          label: {
  193.             normal: {
  194.                show: false,
  195.                position: 'center',
  196.                formatter: '{value|{c}}\n{label|{b}}',
  197.             },
  198.          },
  199.          labelLine: {
  200.             show: false,
  201.             length: 0,
  202.             length2: 0,
  203.          },
  204.          itemStyle: {//间隔
  205.             normal: {
  206.                borderWidth: 3,
  207.                borderColor: '#050e31',
  208.             },
  209.          },
  210.          data: seriesData,
  211.       },
  212.     ],
  213.     title: {  
  214.         text: '', // 初始标题为空  
  215.         subtext: '', // 初始子标题为空  
  216.         left: 'center',  
  217.         top: 'center',  
  218.         textStyle: {  
  219.             fontSize: '25',  
  220.             // 其他样式设置...  
  221.         }
  222.     }  
  223. };
  224. myChart.setOption(option);  
  225. myChart.on('mouseover', (params) => {  
  226.     currentIndex = params.dataIndex;  
  227.     highlightPie(currentIndex);  
  228.     updateCenterTitle(params); // 传递params以获取当前高亮部分的详细信息  
  229. });  
  230. function highlightPie(currentIndex) {  
  231.     myChart.dispatchAction({  
  232.         type: 'highlight',  
  233.         seriesIndex: 0,  
  234.         dataIndex: currentIndex  
  235.     });  
  236.     // 不需要downplay，因为只有一个高亮部分  
  237. }  
  238. function updateCenterTitle(params) {  
  239.     var currentItem = seriesData[params.dataIndex]; // 获取当前高亮部分的数据项  
  240.     option.title.text = currentItem.name ; 
  241.     option.title.subtext = currentItem.value;  
  242.     myChart.setOption({  
  243.         title: {  
  244.             text: option.title.text, // 设置新的标题文本  
  245.             subtext: option.title.subtext // 设置新的子标题文本  
  246.         }  
  247.     });  
  248. } 
  249. updateCenterTitle({ dataIndex: 0 }); // 默认加载第一条数据
  250. //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
  251. function getCirlPoint(x0, y0, r, angle) {
  252.     let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
  253.     let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
  254.     return {
  255.         x: x1,
  256.         y: y1
  257.     }
  258. }
  259. function draw() {
  260.     angle = angle + 3
  261.     myChart.setOption(option, true)
  262. }
  263. setInterval(function () {
  264.     //用setInterval做动画感觉有问题
  265.     draw()
  266. }, 100);

修改外围环图

  2. //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
  3. function getCirlPoint(x0, y0, r, angle) {
  4.     let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
  5.     let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
  6.     return {
  7.         x: x1,
  8.         y: y1
  9.     }
  10. }
  11. function draw() {
  12.     angle = (angle + 3) % 360; // 更新角度，并确保它在0到360之间  
  13.     startAngle = angle; // 更新旋转扇区的起始角度  
  15.     // 更新旋转扇区的结束角度  
  16.     option.series[0].data[option.series[0].data.length - 1].endAngle = startAngle + 3;  
  18.     // 设置图表的新配置  
  19.     myChart.setOption(option, true); // 第二个参数为true表示不合并之前的数据和配置项 
  20. }
  21. setInterval(function () {
  22.     //用setInterval做动画感觉有问题
  23.     draw()
  24. }, 100);
  1. //updateCenterTitle({ dataIndex: 0 }); // 默认加载第一条数据
  2. // 示例：假设您有一个初始数据项，想要在图表加载时设置为其标题和子标题  
  3. var initialDataItem = {  
  4.     name: '初始标题',  
  5.     value: '初始子标题值'  
  6. };  
  8. // 使用初始数据设置标题和子标题  
  9. option.title.text = initialDataItem.name;  
  10. option.title.subtext = initialDataItem.value;  
  12. // 更新图表以反映初始数据的标题和子标题  
  13. myChart.setOption({  
  14.     title: {  
  15.         text: option.title.text,  
  16.         subtext: option.title.subtext  
  17.     }  
  18. });
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注