Vue ECharts圖表通用配置詳解

更新時間：2022年12月15日 11:48:50 作者：愛學習de測試小白

這篇文章主要介紹了Vue ECharts圖表通用配置，Echarts，它是一個與框架無關的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用

前言

本篇來學習下ECharts圖表中的通用配置

標題

title：標題

title: {
          text: "分數(shù)", // 標題文字
           textStyle: {
               color: 'red' // 文字顏色
           },
           borderWidth: 2, // 標題邊框寬度
           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（百分比）

回調函數(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: { // 將圖表在不同類型之間切換,圖表的轉換需要數(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, // 標題邊框寬度
            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: { // 將圖表在不同類型之間切換,圖表的轉換需要數(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, // 值旋轉角度
                },
                barWidth: '30%' // 柱的寬度
            },
            {
                name: '年齡',
                type: 'line',
                data: ageDataArr
            }
        ]
    }
    // 將配置項設置給echarts實例對象
    myCharts.setOption(option)
</script>
</body>
</html>

到此這篇關于Vue ECharts圖表通用配置介紹的文章就介紹到這了,更多相關Vue ECharts配置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: