HTML
|
1 |
<div id="chart" class="chart"></div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
* { padding: 0; margin: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } .chart { width: 100%; height: 100%; padding: 10%; } |
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
// 先引入资源 // https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js // https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js var myChart = echarts.init(document.getElementById("chart")); // 指定图表的配置项和数据 var data = [ { value: 40, name: "rose 1" }, { value: 38, name: "rose 2" }, { value: 32, name: "rose 3" }, { value: 30, name: "rose 4" }, { value: 28, name: "rose 5" }, { value: 26, name: "rose 6" }, { value: 22, name: "rose 7" }, { value: 18, name: "rose 8" } ]; var option = { title: { text: "动态饼图", subtext: "副标题", left: "center" }, legend: { top: "bottom" }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, graphic: [ { type: "text", top: "center", left: "center", style: { text: "10000", fill: "#333333", fontSize: 20, fontWeight: "normal" } } ], tooltip: { trigger: "item", formatter: "{b} : {c} ({d}%)" }, series: [ { name: "Nightingale Chart", type: "pie", radius: ["20%", "40%"], center: ["50%", "50%"], roseType: "area", itemStyle: { borderRadius: 8 }, data: data } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 监听容器大小变化 window.addEventListener("resize", function () { myChart.resize(); }); var autoInterval = autoShowPieTooltip(myChart, data.length); // 鼠标悬停在饼图上时停止，离开继续 $(".chart") .mouseenter(function () { console.log(123); clearInterval(autoInterval); }) .mouseleave(function () { autoInterval = autoShowPieTooltip(myChart, data.length); }); /** * 自动切换显示饼状图提示 */ function autoShowPieTooltip(chart, length) { let lastIndex = 0; let currentIndex = 0; let autoInterval = setInterval(() => { chart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: lastIndex }); chart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: currentIndex }); chart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: currentIndex }); lastIndex = currentIndex; ++currentIndex; if (currentIndex >= length) { currentIndex = 0; } }, 1000); return autoInterval; } |
