Vue ECharts圖表通用配置詳解
前言
本篇來學習下ECharts圖表中的通用配置
標題
title:標題
title: { text: "分數(shù)", // 標題文字 textStyle: { color: 'red' // 文字顏色 }, borderWidth: 2, // 標題邊框?qū)挾? borderColor: 'blue', // 標題邊框顏色 borderRadius: 5, // 標題邊框圓角 left: 50, // 標題的位置 top: 10 // 標題的位置 }
效果
提示框
tooltip:提示框
觸發(fā)類型: trigger:可選值有item\axis
觸發(fā)時機: triggerOn:可選值有 mouseOver\click
格式化顯示: formatter
字符串模板
var option = { tooltip: { trigger: 'item', triggerOn: 'click', formatter: ':{c}' } }
模板變量有 {a}, ,{c},vvxyksv9kd,{e},分別表示系列名,數(shù)據(jù)名,數(shù)據(jù)值等。 在 trigger 為 ‘axis’ 的時候,會有多個系列的數(shù)據(jù),此時可 > 以通過 {a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類型下的 {a},,{c},vvxyksv9kd 含義不一樣。 其中變量{a}, , {c}, > vvxyksv9kd在不同圖表類型下代表數(shù)據(jù)含義為:
- 折線(區(qū)域)圖、柱狀(條形)圖、K線圖 : {a}(系列名稱),(類目值),{c}(數(shù)值), vvxyksv9kd(無)
- 散點圖(氣泡)圖 : {a}(系列名稱),(數(shù)據(jù)名稱),{c}(數(shù)值數(shù)組), vvxyksv9kd(無)
- 地圖 : {a}(系列名稱),(區(qū)域名稱),{c}(合并數(shù)值), vvxyksv9kd(無)
- 餅圖、儀表盤、漏斗圖: {a}(系列名稱),(數(shù)據(jù)項名稱),{c}(數(shù)值), vvxyksv9kd(百分比)
回調(diào)函數(shù)
var option = { tooltip: { trigger: 'item', triggerOn: 'click', formatter: function (arg) { return arg.name + ':' + arg.data } } }
效果
工具按鈕
toolbox:工具按鈕
toolbox: { feature: { saveAsImage: {}, // 將圖表保存為圖片 dataView: {}, // 是否顯示出原始數(shù)據(jù) restore: {}, // 還原圖表 dataZoom: {}, // 數(shù)據(jù)縮放 magicType: { // 將圖表在不同類型之間切換,圖表的轉(zhuǎn)換需要數(shù)據(jù)的支持 type: ['bar', 'line'] } } }
效果
圖例
legend:圖例,用于篩選類別,需要和 series 配合使用
- legend 中的 data 是一個數(shù)組
- legend 中的 data 的值需要和 series 數(shù)組中某組數(shù)據(jù)的 name 值一致
legend: { data: ['分數(shù)', '年齡'] // series中name值保持一致 }
完整代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ECharts-柱狀圖</title> <!-- cdn方式 引入echarts.js文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script> </head> <body> <!-- 準備一個呈現(xiàn)圖表的盒子 --> <div id='app' style="width: 600px;height: 400px"></div> <script> // 初始化echarts實例對象 var myCharts = echarts.init(document.getElementById('app')) // 準備數(shù)據(jù) 將type的值設置為bar var xDataArr = ['張三', '李四', '王五', '大明白', '小糊涂'] // x軸數(shù)據(jù) var yDataArr = [88, 92, 63, 77, 94] // y軸數(shù)據(jù) var ageDataArr = [20, 21, 19, 20, 18] var option = { xAxis: { type: 'category', data: xDataArr }, yAxis: { type: 'value' }, title: { text: "分數(shù)", // 標題文字 textStyle: { color: 'red' // 文字顏色 }, borderWidth: 2, // 標題邊框?qū)挾? borderColor: 'blue', // 標題邊框顏色 borderRadius: 5, // 標題邊框圓角 left: 50, // 標題的位置 top: 10 // 標題的位置 }, tooltip: { trigger: 'item', // axis triggerOn: 'click', // mouseOver 鼠標移動都上面觸發(fā) // formatter: '的{a}是{c}' formatter: function (arg) { console.log(arg) return arg.name + '分數(shù):' + arg.data } }, toolbox: { feature: { saveAsImage: {}, // 將圖表保存為圖片 dataView: {}, // 是否顯示出原始數(shù)據(jù) restore: {}, // 還原圖表 dataZoom: {}, // 數(shù)據(jù)縮放 magicType: { // 將圖表在不同類型之間切換,圖表的轉(zhuǎn)換需要數(shù)據(jù)的支持 type: ['bar', 'line'] } } }, legend: { data: ['分數(shù)', '年齡'] // series中name值保持一致 }, series: [ { name: '分數(shù)', type: 'bar', // 圖表類型 bar:柱狀圖 line:折線圖 pie:餅圖 data: yDataArr, markPoint: { // 標記最大最小值 data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] }, label: { show: true, // 柱狀圖顯示數(shù)值 rotate: 30, // 值旋轉(zhuǎn)角度 }, barWidth: '30%' // 柱的寬度 }, { name: '年齡', type: 'line', data: ageDataArr } ] } // 將配置項設置給echarts實例對象 myCharts.setOption(option) </script> </body> </html>
到此這篇關于Vue ECharts圖表通用配置介紹的文章就介紹到這了,更多相關Vue ECharts配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue的移動端多圖上傳插件vue-easy-uploader的示例代碼
這篇文章主要介紹了Vue的移動端多圖上傳插件vue-easy-uploader的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11Vue使用js-audio-recorder實現(xiàn)錄制,播放與下載音頻功能
這篇文章主要為大家詳細介紹了Vue如何使用js-audio-recorder實現(xiàn)錄制,播放與下載音頻功能,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2023-12-12基于electron+vue3+ts搭建桌面端應用并且可以熱更新
這篇文章主要為大家詳細介紹了如何基于electron+vue3+ts搭建桌面端應用并且可以熱更新,文中的示例代碼講解詳細,感興趣的小伙伴可以參考下2023-10-10