echarts 配置
簡(jiǎn)單例子
-
如下
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項(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ù)顯示圖表涮瞻。 myChart.setOption(option);
餅圖(pie)
-
標(biāo)題設(shè)置
title: { text: '學(xué)生生源地來(lái)源分布圖', subtext: '模擬數(shù)據(jù)', // x 設(shè)置水平安放位置名眉，默認(rèn)左對(duì)齊逛犹，可選值：'center' | 'left' | 'right' | {number}（x坐標(biāo)惠爽，單位px） x: 'center', // y 設(shè)置垂直安放位置丧诺，默認(rèn)全圖頂端届惋，可選值：'top' | 'bottom' | 'center' | {number}（y坐標(biāo)髓帽，單位px） y: 'top', // itemGap設(shè)置主副標(biāo)題縱向間隔，單位px脑豹，默認(rèn)為10郑藏， itemGap: 30, backgroundColor: '#EEE', // 主標(biāo)題文本樣式設(shè)置 textStyle: { fontSize: 26, fontWeight: 'bolder', color: '#000080' }, // 副標(biāo)題文本樣式設(shè)置 subtextStyle: { fontSize: 18, color: '#8B2323' } }, -
圖例設(shè)置
legend: { // orient 設(shè)置布局方式，默認(rèn)水平布局瘩欺， // 可選值：'horizontal'（水平） | 'vertical'（垂直） orient: 'vertical', // x 設(shè)置水平安放位置必盖，默認(rèn)全圖居中， // 可選值：'center' | 'left' | 'right' | {number}（x坐標(biāo)俱饿，單位px） x: 'left', // y 設(shè)置垂直安放位置歌粥，默認(rèn)全圖頂端， // 可選值：'top' | 'bottom' | 'center' | {number}（y坐標(biāo)拍埠，單位px） y: 'center', itemWidth: 24, // 設(shè)置圖例圖形的寬 itemHeight: 18, // 設(shè)置圖例圖形的高 textStyle: { color: '#666' // 圖例文字顏色 }, // itemGap設(shè)置各個(gè)item之間的間隔失驶，單位px，默認(rèn)為10枣购，橫向布局時(shí)為水平間隔嬉探， //縱向布局時(shí)為縱向間隔 itemGap: 30, backgroundColor: '#eee', // 設(shè)置整個(gè)圖例區(qū)域背景顏色 data: ['北京','上海','廣州','深圳','鄭州'] }， -
值域設(shè)置
series: [ { name: '生源地', type: 'pie', // radius: '50%', // 設(shè)置餅狀圖大小棉圈，100%時(shí)涩堤，最大直徑=整個(gè)圖形的min(寬，高) radius: ['30%', '60%'], // 設(shè)置環(huán)形餅狀圖分瘾， // 第一個(gè)百分?jǐn)?shù)設(shè)置內(nèi)圈大小胎围，第二個(gè)百分?jǐn)?shù)設(shè)置外圈大小 center: ['50%', '50%'], // 設(shè)置餅狀圖位置，第一個(gè)百分?jǐn)?shù)調(diào)水平位置德召， // 第二個(gè)百分?jǐn)?shù)調(diào)垂直位置 data: [ {value:335, name:'北京'}, {value:310, name:'上海'}, {value:234, name:'廣州'}, {value:135, name:'深圳'}, {value:148, name:'鄭州'} ], // itemStyle 設(shè)置餅狀圖扇形區(qū)域樣式 itemStyle: { // emphasis：英文意思是 強(qiáng)調(diào);著重;（輪廓白魂、圖形等的）鮮明;突出，重讀 // emphasis：設(shè)置鼠標(biāo)放到哪一塊扇形上面的時(shí)候氏捞，扇形樣式碧聪、陰影 emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(30, 144, 255，0.5)' } }, // 設(shè)置值域的那指向線 labelLine: { normal: { show: false // show設(shè)置線是否顯示液茎，默認(rèn)為true逞姿，可選值：true | false } }, // 設(shè)置值域的標(biāo)簽 label: { normal: { position: 'inner', // 設(shè)置標(biāo)簽位置辞嗡，默認(rèn)在餅狀圖外 //可選值：'outer' | 'inner（餅狀圖上）' // formatter: '{a} : {c}個(gè) (taeq7dx%)' 設(shè)置標(biāo)簽顯示內(nèi)容 滞造，默認(rèn)顯示续室 // {a}指series.name 指series.data的name // {c}指series.data的value tebf4ua%指這一部分占總數(shù)的百分比 formatter: '{c}' } } } ], -
提示框
tooltip: { // trigger 設(shè)置觸發(fā)類型谒养，默認(rèn)數(shù)據(jù)觸發(fā)挺狰，可選值：'item' | 'axis' trigger: 'item', showDelay: 20, // 顯示延遲，添加顯示延遲可以避免頻繁切換买窟，單位ms hideDelay: 20, // 隱藏延遲丰泊，單位ms backgroundColor: 'rgba(255,0,0,0.7)', // 提示框背景顏色 textStyle: { fontSize: '16px', color: '#000' // 設(shè)置文本顏色 默認(rèn)#FFF }, // formatter設(shè)置提示框顯示內(nèi)容 // {a}指series.name 指series.data的name // {c}指series.data的value sskw9sv%指這一部分占總數(shù)的百分比 formatter: '{a} <br/>始绍 : {c}個(gè) (zlw22lz%)' },
無(wú)數(shù)據(jù)提示/回調(diào)函數(shù)
function initBar(domId,data){
//測(cè)試數(shù)據(jù)
let data=[
['Mon',820], ['Tue',932],['Wed',901],
['Thu',934],['Fri',1290],['Sat',1330],['Sun',1320],
]
]
// 基于準(zhǔn)備好的dom瞳购，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById(domId));
//顯示正在加載框
myChart.showLoading({
text: '數(shù)據(jù)正在努力加載...',
textStyle: { fontSize : 30 , color: '#444' },
effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
});
//清除舊數(shù)據(jù)
myChart.clear()
console.log("繪制柱狀圖開始....");
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
xAxis: {
type: 'category',
},
yAxis: {
type: 'value'
},
series: [{
data: data,
type: 'line'
}]
};
//當(dāng)數(shù)據(jù)為空時(shí)
if (!data){
option={
title: {
text: '暫無(wú)數(shù)據(jù)',
x: 'center',
y: 'center',
textStyle: {
color: '#070707',
fontWeight: 'normal',
fontSize: 16
}
}
}
}
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
//showLoading遮蓋層隱藏
myChart.hideLoading();
//圖表繪制完成后
myChart.on('finished',() => {
console.log("執(zhí)行一次");
})
}
