91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

Echarts怎么實現點擊列表聯動餅圖

小億
126
2024-01-26 17:01:17
欄目: 編程語言

要實現點擊列表聯動餅圖,首先需要準備好列表和餅圖的數據。然后,通過Echarts的事件監聽機制,在列表點擊事件中獲取到選中項的數據,然后更新餅圖的數據,最后重新渲染餅圖。

以下是一個簡單的示例代碼:

HTML部分:

<div id="list">
  <ul>
    <li data-value="30">選項1</li>
    <li data-value="50">選項2</li>
    <li data-value="20">選項3</li>
  </ul>
</div>
<div id="chart" style="width: 400px; height: 400px;"></div>

JavaScript部分:

// 初始化餅圖的數據
var pieData = [
  { value: 30, name: '選項1' },
  { value: 50, name: '選項2' },
  { value: 20, name: '選項3' }
];

// 初始化餅圖的配置
var pieOptions = {
  series: [
    {
      type: 'pie',
      data: pieData
    }
  ]
};

// 綁定列表的點擊事件
document.getElementById('list').addEventListener('click', function(e) {
  var li = e.target;
  if (li.tagName === 'LI') {
    var value = li.getAttribute('data-value');
    // 更新餅圖的數據
    pieData = [
      { value: value, name: '選項1' },
      { value: 100 - value, name: '其他選項' }
    ];
    // 重新渲染餅圖
    echarts.init(document.getElementById('chart')).setOption(pieOptions);
  }
});

在以上代碼中,通過給列表的每個選項添加自定義屬性data-value來存儲對應的值。在列表的點擊事件中,獲取到被點擊的選項的值,然后根據該值更新餅圖的數據,最后重新渲染餅圖。

0
贵州省| 即墨市| 淮安市| 宜川县| 洛南县| 东方市| 荆州市| 修水县| 收藏| 喜德县| 嘉祥县| 界首市| 开远市| 湖口县| 福泉市| 鹤壁市| 雅江县| 江都市| 广饶县| 河源市| 九寨沟县| 德兴市| 汶上县| 井研县| 鄯善县| 温泉县| 乌兰县| 新昌县| 抚宁县| 乳源| 图木舒克市| 阿鲁科尔沁旗| 大余县| 广灵县| 玉树县| 新乡市| 阳曲县| 梧州市| 五莲县| 黔东| 修水县|