當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

九十一、前端可视化ECharts的使用

發布時間：2024/10/8 HTML 78 豆豆

生活随笔收集整理的這篇文章主要介紹了九十一、前端可视化ECharts的使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

@Author:Runsen

學python的應該聽過Pyecharts。那么就應該有ECharts

這次介紹的就是一個基于Javascript的數據可視化庫ECharts。

Echarts 由百度的前端技術部開發，是一款難得的由國內廠商開源的JS代碼庫，相比同類產品如 highcharts，google charts 都有著相當的競爭力。并且用的人不少，說明文檔較容易找到，上手簡單。

ECharts入門

我們可以在直接下載echarts.min.js并用 <script>標簽引入。

cdnjs :https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

官方文檔：https://echarts.apache.org/zh/index.html

下面是入門代碼

<head><title>Document</title><script src="lib/echarts.min.js"></script> </head><body><div style="width: 600px;height: 400px"></div><script>// 步驟3：初始化echarts實例對象// 參數, dom,決定圖表最終呈現的位置var mCharts = echarts.init(document.querySelector('div'))// 步驟4：準備配置項var option = {title: {text: '成績', // 標題文字link: 'https://maoli.blog.csdn.net/', // 標題超鏈接textStyle: { // 標題樣式設置color: 'red' // 標題文字}},xAxis: {type: 'category', // 指明x軸為類目軸data: ['小明', '小紅', '小王'] // 為類目軸提供數據, 該數據是一個數組, 數組中的每個元素會呈現在x軸上},yAxis: {type: 'value' // 指明x軸為數值軸, 指明數值軸之后, 無需指定data},tooltip: {},legend: {data: ['語文成績']},series: [{name: '語文', // 為圖標起一個名稱type: 'bar', // 指明該圖標類型為柱狀圖data: [70, 92, 87] // 為x軸的每一個元素, 指明呈現在y軸的數值}]}// 步驟5：將配置項設置給echarts實例對象mCharts.setOption(option)</script> </body>

需要了解的主要配置：
series；xAxis；yAxis；grid ；tooltip；title；legend；color

series

系列列表。每個系列通過 type 決定自己的圖表類型
大白話：圖標數據，指定什么類型的圖標，可以多個圖表重疊。

xAxis：直角坐標系 grid 中的 x 軸
boundaryGap: 坐標軸兩邊留白策略 true，這時候刻度只是作為分隔線，標簽和數據點都會在兩個刻度之間的帶(band)中間。
yAxis：直角坐標系 grid 中的 y 軸
grid：直角坐標系內繪圖網格。修改圖表的大小
title：標題組件
tooltip：提示框組件
legend：圖例組件
color：調色盤顏色列表

折線圖

<head><title>Document</title><script src="lib/echarts.min.js"></script> </head><body><div style="width: 600px;height: 400px"></div><script>//1. ECharts最基本的代碼結構//2. x軸數據:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']//3. y軸數據:[3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]//4. 將type的值設置為linevar mCharts = echarts.init(document.querySelector('div'))var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},series: [{name: '康師傅',data: yDataArr,type: 'line', // 設置圖表類型為折線圖smooth: true, // 是否為平滑線lineStyle: { // 線的樣式設置color: 'green',type: 'solid' // dashed dotted solid},areaStyle: { // 線和x軸形成的區域設置color: 'pink'},label: {show: true},markPoint: { // 標記點data: [{type: 'max'},{type: 'min'}]},markLine: { // 標記線data: [{type: 'average'}]},}],tooltip: {trigger: 'axis',triggerOn: 'click',//觸發時機, click代表點擊, mouseOver代表鼠標移過formatter: function (arg) {return arg[0].name + '的銷售金額是:' + arg[0].data}},}mCharts.setOption(option)</script> </body>

區域縮放 dataZoom

dataZoom用于區域縮放，對數據范圍過濾，x軸和y軸都可以設置
dataZoom是一個數組可以配置多個區域縮放器

<head><title>Document</title><script src="lib/echarts.min.js"></script> </head><body><div style="width: 600px;height:400px"></div><script>var mCharts = echarts.init(document.querySelector("div"))var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅臺', '二妞', '大強']var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]var option = {dataZoom: [ // 控制區域縮放效果的實現{type: 'slider', // 縮放的類型 slide代表滑塊 inside代表依靠鼠標滾輪// type: 'inside'xAxisIndex: 0},{type: 'slider',yAxisIndex: 0,start: 0, // 渲染完成后, 數據篩選的初始值, 百分比end: 80 // 渲染完成后, 數據篩選的結束值, 百分比}],toolbox: {feature: {dataZoom: {}}},grid: {show: true,borderColor: 'red',},xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},series: [{name: '語文',type: 'bar',markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]},label: {show: true,rotate: 60,position: 'top'},barWidth: '30%',data: yDataArr}]}mCharts.setOption(option)</script> </body>

餅圖

相比于柱狀圖，餅圖的數據格式更加簡單，它數值是一維的，無需給出類目。
餅圖不在直角坐標系上實現，自然也不需要 xAxis 和 yAxis。

<head><title>Document</title><script src="lib/echarts.min.js"></script> </head><body><div style="width: 600px;height:400px"></div><script>//1. ECharts最基本的代碼結構//2. 準備數據//3. 將type的值設置為pievar mCharts = echarts.init(document.querySelector("div"))// pieData就是需要設置給餅圖的數據, 數組,數組中包含一個又一個的對象, 每一個對象中, 需要有name和valuevar pieData = [{name: '淘寶',value: 11231},{name: '京東',value: 22673},{name: '唯品會',value: 6123},{name: '1號店',value: 8989},{name: '聚美優品',value: 6700}]var option = {series: [{type: 'pie',data: pieData,label: { // 餅圖文字的顯示show: true, // 顯示文字//formatter: 'hehe' // 決定文字顯示的內容formatter: function(arg){// console.log(arg)return arg.name + '平臺' + arg.value + '元\n' + arg.percent + '%'}},// radius: 20 // 餅圖的半徑// radius: '20%' // 百分比參照的是寬度和高度中較小的那一部分的一半來進行百分比設置// radius: ['50%', '75%'] // 第0個元素代表的是內圓的半徑第1個元素外圓的半徑roseType: 'radius', // 南丁格爾圖餅圖的每一個區域的半徑是不同的// selectedMode: 'single' // 選中的效果,能夠將選中的區域偏離圓點一小段距離selectedMode: 'multiple',selectedOffset: 30}]}mCharts.setOption(option)</script> </body>

儀表盤

<head><title>Document</title><script src="lib/echarts.min.js"></script> </head><body><div style="width: 600px;height:400px"></div><script>//1. ECharts最基本的代碼結構//2. 準備數據, 設置給series下的data//3. 將type的值設置為gaugevar mCharts = echarts.init(document.querySelector("div"))var option = {series: [{type: 'gauge',data: [{value: 97,itemStyle: { // 指針的樣式color: 'pink' // 指針的顏色}}, // 每一個對象就代表一個指針{value: 85,itemStyle: {color: 'green'}}],min: 50 // min max 控制儀表盤數值范圍}]}mCharts.setOption(option)</script> </body>

地圖

地圖圖表的使用方式

百度地圖API : 使用百度地圖的 api , 它能夠在線聯網展示地圖, 百度地圖需要申請 ak
矢量地圖 : 可以離線展示地圖, 需要開發者準備矢量地圖數據

接下來的實現是通過矢量圖的方式來實現的

準備中國的矢量 json 文件, 放到 json/map/ 目錄之下

<head><title>Document</title><script src="lib/echarts.min.js"></script><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head><body><div style="width: 600px;height:400px;border: 1px solid #f00"></div><script>//1. ECharts最基本的代碼結構//2. 準備中國地圖的矢量數據//3. 使用Ajax獲取矢量地圖數據//4. 在Ajax的回調函數中注冊地圖矢量數據 echarts.registerMap('chinaMap', 矢量地圖數據)//5. 配置geo的type為'map', map為'chinaMap' var mCharts = echarts.init(document.querySelector("div"))$.get('json/map/china.json', function (ret) {// ret 就是中國的各個省份的矢量地圖數據console.log(1)console.log(ret)echarts.registerMap('chinaMap', ret)var option = {geo: {type: 'map',map: 'chinaMap', // chinaMap需要和registerMap中的第一個參數保持一致roam: true, // 設置允許縮放以及拖動的效果label: {show: true // 展示標簽},zoom: 1, // 設置初始化的縮放比例center: [87.617733, 43.792818] // 設置地圖中心點的坐標}}mCharts.setOption(option)})</script> </body>

地圖的常見配置

縮放拖動: roam
名稱顯示: label
初始縮放比例: zoom
地圖中心點: center

地圖和散點圖結合

<head><title>Document</title><script src="lib/echarts.min.js"></script><script src="lib/jquery.min.js"></script> </head><body><div style="width: 600px;height:400px;border: 1px solid #f00"></div><script>//1. 給series下增加一個新的對象//2. 準備數據散點數據 , 配置給series下的另外一個對象//3. 配置series下的新對象的type值為effectScatter//4. 指明散點圖的坐標系統為geo//5. 調整漣漪動畫效果var airData = [{ name: '北京', value: 39.92 },{ name: '天津', value: 39.13 },{ name: '上海', value: 31.22 },{ name: '重慶', value: 66 },{ name: '河北', value: 147 },{ name: '河南', value: 113 },{ name: '云南', value: 25.04 },{ name: '遼寧', value: 50 },{ name: '黑龍江', value: 114 },{ name: '湖南', value: 175 },{ name: '安徽', value: 117 },{ name: '山東', value: 92 },{ name: '新疆', value: 84 },{ name: '江蘇', value: 67 },{ name: '浙江', value: 84 },{ name: '江西', value: 96 },{ name: '湖北', value: 273 },{ name: '廣西', value: 59 },{ name: '甘肅', value: 99 },{ name: '山西', value: 39 },{ name: '內蒙古', value: 58 },{ name: '陜西', value: 61 },{ name: '吉林', value: 51 },{ name: '福建', value: 29 },{ name: '貴州', value: 71 },{ name: '廣東', value: 38 },{ name: '青海', value: 57 },{ name: '西藏', value: 24 },{ name: '四川', value: 58 },{ name: '寧夏', value: 52 },{ name: '海南', value: 54 },{ name: '臺灣', value: 88 },{ name: '香港', value: 66 },{ name: '澳門', value: 77 },{ name: '南海諸島', value: 55 }]var scatterData = [{value: [117.283042, 31.86119]}]var mCharts = echarts.init(document.querySelector("div"))$.get('json/map/china.json', function (ret) {// ret 就是中國的各個省份的矢量地圖數據console.log(ret)echarts.registerMap('chinaMap', ret)var option = {geo: {type: 'map',map: 'chinaMap', // chinaMap需要和registerMap中的第一個參數保持一致roam: true, // 設置允許縮放以及拖動的效果label: {show: true // 展示標簽}},series: [{data: airData,geoIndex: 0, // 將空氣質量的數據和第0個geo配置關聯在一起type: 'map'},{data: scatterData, // 配置散點的坐標數據type: 'effectScatter',coordinateSystem: 'geo', // 指明散點使用的坐標系統 geo的坐標系統rippleEffect: {scale: 10 // 設置漣漪動畫的縮放比例}}],visualMap: {min: 0,max: 300,inRange: {color: ['white', 'red'] // 控制顏色漸變的范圍},calculable: true // 出現滑塊},}mCharts.setOption(option)})</script> </body>

總結

以上是生活随笔為你收集整理的九十一、前端可视化ECharts的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：记录关于浏览器跨域和设置默认浏览器的问
下一篇：我的前端教程，不断整理，反复学习，记录着