日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 >

echarts生成图表

發(fā)布時(shí)間：2023/12/10 81 豆豆
生活随笔 收集整理的這篇文章主要介紹了 echarts生成图表 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

目錄

    • 1. echarts是一個(gè)優(yōu)秀的js繪圖框架
    • 2. 如何使用echats框架繪圖？
    • 3. 更多彩蛋

1. echarts是一個(gè)優(yōu)秀的js繪圖框架

ECharts，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

豐富的可視化類型

ECharts提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日圖，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

千萬數(shù)據(jù)的前端展現(xiàn)

通過增量渲染技術(shù)（4.0+），配合各種細(xì)致的優(yōu)化，ECharts
能夠展現(xiàn)千萬級(jí)的數(shù)據(jù)量，并且在這個(gè)數(shù)據(jù)量級(jí)依然能夠進(jìn)行流暢的縮放平移等交互。
幾千萬的地理坐標(biāo)數(shù)據(jù)就算使用二進(jìn)制存儲(chǔ)也要占上百 MB 的空間。
因此 ECharts 同時(shí)提供了對流加載（4.0+）的支持，你可以使用
WebSocket 或者對數(shù)據(jù)分塊后加載，加載多少渲染多少！
不需要漫長地等待所有數(shù)據(jù)加載完再進(jìn)行繪制

官網(wǎng)
https://echarts.apache.org/
它是百度團(tuán)隊(duì)研發(fā)的，現(xiàn)在交給阿帕奇管理了。

2. 如何使用echats框架繪圖？

導(dǎo)入echats的js包
github下載，dist目錄

<script type="text/javascript" src="echarts.js" ></script>

cdn

https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.js

具體代碼

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>echart study 01</title><script type="text/javascript" src="echarts.js" ></script></head><body><!-- 為echarts準(zhǔn)備一個(gè)寬高剛好的dom --><div id="app" style="width: 600px;height:400px;"></div><script>/*基于準(zhǔn)備好的dom，初始化echarts對象*/var my_echarts = echarts.init(document.getElementById("app"));/*指定圖表的配置項(xiàng)和數(shù)據(jù)*/var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]}; /*使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖標(biāo)*/my_echarts.setOption(option);</script></body> </html>

柱狀圖效果演示

數(shù)據(jù)更改

指定echarts對象前，更改了標(biāo)題，增加了價(jià)格這一柱狀欄

option.title.text = "嚶嚶嚶"; option.legend.data.push('價(jià)格'); // 設(shè)置項(xiàng) option.series.push({"name": "價(jià)格", "type": "bar", "data": [10, 20, 30, 40, 50, 60]}); // 設(shè)置對應(yīng)的數(shù)據(jù)


上面可以看出，給定json數(shù)據(jù)就能改變圖表。所以這個(gè)東西
可以和ajax結(jié)合，來異步加載對應(yīng)的圖表。

3. 更多彩蛋

更多樣式的圖表，見官網(wǎng)實(shí)例，貼上對應(yīng)的代碼，更改數(shù)據(jù)。圖表就有了。
https://echarts.apache.org/examples/zh/index.html

  • 折線圖
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>echart study 01</title><script type="text/javascript" src="echarts.js" ></script></head><body><div id="app1" style="width: 400px;height: 400px;"></div><script>/*基于準(zhǔn)備好的dom，初始化echarts對象*/var my_echarts = null;my_echarts = echarts.init(document.getElementById("app1"));option = {legend: {data:['val']},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: "val",data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}]};my_echarts.setOption(option);</script></body> </html>

總結(jié)

以上是生活随笔為你收集整理的echarts生成图表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。