當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Echarts散点图

發布時間：2024/9/30 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 Echarts散点图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

兩類散點圖

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><script src="../echarts.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據 var option = {xAxis: {},yAxis: {},legend: {data: ['類別1','類別2']},series: [{name: '類別1',data: [[2.0, 8.04],[3.0, 6.95],[23.0, 7.58],[18.0, 8.81],[12.0, 8.33],[4.0, 9.96],[16.0, 7.24],[14.0, 4.26],[12.0, 10.84],[10.0, 4.82],[7.0, 5.68]],type: 'scatter'},{name: '類別2',data: [[1.0, 2.04],[2.0, 15.95],[26.0, 17.58],[13.0, 7.81],[22.0, 5.33],[14.0, 9.96],[6.0, 4.24],[4.0, 4.26],[22.0, 13.84],[16.0, 14.82],[17.0, 15.68]],type: 'scatter'}] };// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script> </body> </html>

?氣泡散點圖

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><script src="../echarts.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據 var option = {xAxis: {},yAxis: {},legend: {data: ['類別1','類別2']},series: [{name: '類別1',data: [[2.0, 8.04, 10],[3.0, 6.95, 20],[23.0, 7.58, 30],[18.0, 8.81, 15],[12.0, 8.33, 16],[4.0, 9.96, 5],[16.0, 7.24, 18],[14.0, 4.26, 35],[12.0, 10.84, 20],[10.0, 4.82, 50],[7.0, 5.68, 13]],symbolSize: function (data) {return data[2];},type: 'scatter'},{name: '類別2',data: [[1.0, 2.04],[2.0, 15.95],[26.0, 17.58],[13.0, 7.81],[22.0, 5.33],[14.0, 9.96],[6.0, 4.24],[4.0, 4.26],[22.0, 13.84],[16.0, 14.82],[17.0, 15.68]],type: 'scatter'}] };// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script> </body> </html> 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Echarts散点图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。