Echars璁茶В鍒嗘瀽
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echars璁茶В鍒嗘瀽相关的知识，希望对你有一定的参考价值。
鏍囩锛?a href='http://www.mamicode.com/so/1/%e6%95%b0%e6%8d%ae%e5%8a%a0%e8%bd%bd' title='鏁版嵁鍔犺浇'>鏁版嵁鍔犺浇
saveas ffd 鏂囩珷 padding 澶氫釜 fun star ottvar echarts = require('echarts');
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('main'));
// 缁樺埗鍥捐〃
myChart.setOption({
title: { text: 'ECharts 鍏ラ棬绀轰緥' },
tooltip: {},
xAxis: {
data: ["琛～","缇婃瘺琛?quot;,"闆汉琛?quot;,"瑁ゅ瓙","楂樿窡闉?quot;,"琚滃瓙"]
},
yAxis: {},
series: [{
name: '閿€閲?#39;,
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
涔熷彲浠ユ寜闇€寮曞叆
Echarts鍏冪礌
鍏ㄥ眬鑳屾櫙
// 鍏ㄥ浘榛樿鑳屾櫙
// backgroundColor: 'rgba(0,0,0,0)',
// 榛樿鑹叉澘
color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
'#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
'#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
'#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],title
title: {
x: 'left', // 姘村钩瀹夋斁浣嶇疆锛岄粯璁や负宸﹀榻愶紝鍙€変负锛? // 'center' | 'left' | 'right'
// | {number}锛坸鍧愭爣锛屽崟浣峱x锛? y: 'top', // 鍨傜洿瀹夋斁浣嶇疆锛岄粯璁や负鍏ㄥ浘椤剁锛屽彲閫変负锛? // 'top' | 'bottom' | 'center'
// | {number}锛坹鍧愭爣锛屽崟浣峱x锛? //textAlign: null // 姘村钩瀵归綈鏂瑰紡锛岄粯璁ゆ牴鎹畑璁剧疆鑷姩璋冩暣
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 鏍囬杈规棰滆壊
borderWidth: 0, // 鏍囬杈规绾垮锛屽崟浣峱x锛岄粯璁や负0锛堟棤杈规锛? padding: 5, // 鏍囬鍐呰竟璺濓紝鍗曚綅px锛岄粯璁ゅ悇鏂瑰悜鍐呰竟璺濅负5锛? // 鎺ュ彈鏁扮粍鍒嗗埆璁惧畾涓婂彸涓嬪乏杈硅窛锛屽悓css
itemGap: 10, // 涓诲壇鏍囬绾靛悜闂撮殧锛屽崟浣峱x锛岄粯璁や负10锛? textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 涓绘爣棰樻枃瀛楅鑹? },
subtextStyle: {
color: '#aaa' // 鍓爣棰樻枃瀛楅鑹? }
}legend
legend: {
orient: 'horizontal', // 甯冨眬鏂瑰紡锛岄粯璁や负姘村钩甯冨眬锛屽彲閫変负锛? // 'horizontal' | 'vertical'
x: 'center', // 姘村钩瀹夋斁浣嶇疆锛岄粯璁や负鍏ㄥ浘灞呬腑锛屽彲閫変负锛? // 'center' | 'left' | 'right'
// | {number}锛坸鍧愭爣锛屽崟浣峱x锛? y: 'top', // 鍨傜洿瀹夋斁浣嶇疆锛岄粯璁や负鍏ㄥ浘椤剁锛屽彲閫変负锛? // 'top' | 'bottom' | 'center'
// | {number}锛坹鍧愭爣锛屽崟浣峱x锛? backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 鍥句緥杈规棰滆壊
borderWidth: 0, // 鍥句緥杈规绾垮锛屽崟浣峱x锛岄粯璁や负0锛堟棤杈规锛? padding: 5, // 鍥句緥鍐呰竟璺濓紝鍗曚綅px锛岄粯璁ゅ悇鏂瑰悜鍐呰竟璺濅负5锛? // 鎺ュ彈鏁扮粍鍒嗗埆璁惧畾涓婂彸涓嬪乏杈硅窛锛屽悓css
itemGap: 10, // 鍚勪釜item涔嬮棿鐨勯棿闅旓紝鍗曚綅px锛岄粯璁や负10锛? // 妯悜甯冨眬鏃朵负姘村钩闂撮殧锛岀旱鍚戝竷灞€鏃朵负绾靛悜闂撮殧
itemWidth: 20, // 鍥句緥鍥惧舰瀹藉害
itemHeight: 14, // 鍥句緥鍥惧舰楂樺害
textStyle: {
color: '#333' // 鍥句緥鏂囧瓧棰滆壊
}
}grid
grid: {
x: 80,
y: 60,
x2: 80,
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#ccc'
}dataRange锛堝€煎煙锛?/h3>
dataRange: {
orient: 'vertical', // 甯冨眬鏂瑰紡锛岄粯璁や负鍨傜洿甯冨眬锛屽彲閫変负锛? // 'horizontal' | 'vertical'
x: 'left', // 姘村钩瀹夋斁浣嶇疆锛岄粯璁や负鍏ㄥ浘宸﹀榻愶紝鍙€変负锛? // 'center' | 'left' | 'right'
// | {number}锛坸鍧愭爣锛屽崟浣峱x锛? y: 'bottom', // 鍨傜洿瀹夋斁浣嶇疆锛岄粯璁や负鍏ㄥ浘搴曢儴锛屽彲閫変负锛? // 'top' | 'bottom' | 'center'
// | {number}锛坹鍧愭爣锛屽崟浣峱x锛? backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 鍊煎煙杈规棰滆壊
borderWidth: 0, // 鍊煎煙杈规绾垮锛屽崟浣峱x锛岄粯璁や负0锛堟棤杈规锛? padding: 5, // 鍊煎煙鍐呰竟璺濓紝鍗曚綅px锛岄粯璁ゅ悇鏂瑰悜鍐呰竟璺濅负5锛? // 鎺ュ彈鏁扮粍鍒嗗埆璁惧畾涓婂彸涓嬪乏杈硅窛锛屽悓css
itemGap: 10, // 鍚勪釜item涔嬮棿鐨勯棿闅旓紝鍗曚綅px锛岄粯璁や负10锛? // 妯悜甯冨眬鏃朵负姘村钩闂撮殧锛岀旱鍚戝竷灞€鏃朵负绾靛悜闂撮殧
itemWidth: 20, // 鍊煎煙鍥惧舰瀹藉害锛岀嚎鎬ф笎鍙樻按骞冲竷灞€瀹藉害涓鸿鍊?* 10
itemHeight: 14, // 鍊煎煙鍥惧舰楂樺害锛岀嚎鎬ф笎鍙樺瀭鐩村竷灞€楂樺害涓鸿鍊?* 10
splitNumber: 5, // 鍒嗗壊娈垫暟锛岄粯璁や负5锛屼负0鏃朵负绾挎€ф笎鍙? color:['#1e90ff','#f0ffff'],//棰滆壊
//text:['楂?#39;,'浣?#39;], // 鏂囨湰锛岄粯璁や负鏁板€兼枃鏈? textStyle: {
color: '#333' // 鍊煎煙鏂囧瓧棰滆壊
}
}
toolbox: {
orient: 'horizontal', // 甯冨眬鏂瑰紡锛岄粯璁や负姘村钩甯冨眬锛屽彲閫変负锛? // 'horizontal' | 'vertical'
x: 'right', // 姘村钩瀹夋斁浣嶇疆锛岄粯璁や负鍏ㄥ浘鍙冲榻愶紝鍙€変负锛? // 'center' | 'left' | 'right'
// | {number}锛坸鍧愭爣锛屽崟浣峱x锛? y: 'top', // 鍨傜洿瀹夋斁浣嶇疆锛岄粯璁や负鍏ㄥ浘椤剁锛屽彲閫変负锛? // 'top' | 'bottom' | 'center'
// | {number}锛坹鍧愭爣锛屽崟浣峱x锛? color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
backgroundColor: 'rgba(0,0,0,0)', // 宸ュ叿绠辫儗鏅鑹? borderColor: '#ccc', // 宸ュ叿绠辫竟妗嗛鑹? borderWidth: 0, // 宸ュ叿绠辫竟妗嗙嚎瀹斤紝鍗曚綅px锛岄粯璁や负0锛堟棤杈规锛? padding: 5, // 宸ュ叿绠卞唴杈硅窛锛屽崟浣峱x锛岄粯璁ゅ悇鏂瑰悜鍐呰竟璺濅负5锛? // 鎺ュ彈鏁扮粍鍒嗗埆璁惧畾涓婂彸涓嬪乏杈硅窛锛屽悓css
itemGap: 10, // 鍚勪釜item涔嬮棿鐨勯棿闅旓紝鍗曚綅px锛岄粯璁や负10锛? // 妯悜甯冨眬鏃朵负姘村钩闂撮殧锛岀旱鍚戝竷灞€鏃朵负绾靛悜闂撮殧
itemSize: 16, // 宸ュ叿绠卞浘褰㈠搴? featureImageIcon : {}, // 鑷畾涔夊浘鐗噄con
featureTitle : {
mark : '杈呭姪绾垮紑鍏?#39;,
markUndo : '鍒犻櫎杈呭姪绾?#39;,
markClear : '娓呯┖杈呭姪绾?#39;,
dataZoom : '鍖哄煙缂╂斁',
dataZoomReset : '鍖哄煙缂╂斁鍚庨€€',
dataView : '鏁版嵁瑙嗗浘',
lineChart : '鎶樼嚎鍥惧垏鎹?#39;,
barChart : '鏌卞舰鍥惧垏鎹?#39;,
restore : '杩樺師',
saveAsImage : '淇濆瓨涓哄浘鐗?#39;
}
}
tooltip: {
trigger: 'item', // 瑙﹀彂绫诲瀷锛岄粯璁ゆ暟鎹Е鍙戯紝瑙佷笅鍥撅紝鍙€変负锛?#39;item' | 'axis'
showDelay: 20, // 鏄剧ず寤惰繜锛屾坊鍔犳樉绀哄欢杩熷彲浠ラ伩鍏嶉绻佸垏鎹紝鍗曚綅ms
hideDelay: 100, // 闅愯棌寤惰繜锛屽崟浣峬s
transitionDuration : 0.4, // 鍔ㄧ敾鍙樻崲鏃堕棿锛屽崟浣峴
backgroundColor: 'rgba(0,0,0,0.7)', // 鎻愮ず鑳屾櫙棰滆壊锛岄粯璁や负閫忔槑搴︿负0.7鐨勯粦鑹? borderColor: '#333', // 鎻愮ず杈规棰滆壊
borderRadius: 4, // 鎻愮ず杈规鍦嗚锛屽崟浣峱x锛岄粯璁や负4
borderWidth: 0, // 鎻愮ず杈规绾垮锛屽崟浣峱x锛岄粯璁や负0锛堟棤杈规锛? padding: 5, // 鎻愮ず鍐呰竟璺濓紝鍗曚綅px锛岄粯璁ゅ悇鏂瑰悜鍐呰竟璺濅负5锛? // 鎺ュ彈鏁扮粍鍒嗗埆璁惧畾涓婂彸涓嬪乏杈硅窛锛屽悓css
axisPointer : { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
type : 'line', // 榛樿涓虹洿绾匡紝鍙€変负锛?#39;line' | 'shadow'
lineStyle : { // 鐩寸嚎鎸囩ず鍣ㄦ牱寮忚缃? color: '#48b',
width: 2,
type: 'solid'
},
shadowStyle : { // 闃村奖鎸囩ず鍣ㄦ牱寮忚缃? width: 'auto', // 闃村奖澶у皬
color: 'rgba(150,150,150,0.3)' // 闃村奖棰滆壊
}
},
textStyle: {
color: '#fff'
}
}
xAxis
xAxis : [
{
type : 'category',
axisLine: {
symbol: ['none', 'arrow'], //璁剧疆x杞存垨y杞寸澶? lineStyle: {
color: '#B5B5B5',
width: 2, //杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
}
},
//鍒诲害鏄悜鍐呰繕鏄悜澶? axisTick:{
inside:true,
length:1,
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color:'#FCFCFC',//缃戞牸棰滆壊
}
},
axisLabel:{ //璋冩暣x杞寸殑lable
//interval:0, //鎸墄杞寸殑闀垮害鏄剧ず鐨勫埢搴︾殑涓暟 渚嬪锛氭湰鏉ユ樉绀?0涓埢搴︼紝鍥犱负x杞寸鍙樉绀轰簡10涓紝
rotate:0, //瀹炵幇x杞寸殑鍒诲害鐨勬爣璇嗗疄鐜版棆杞紝
textStyle:{
fontSize:10,// 璁╁瓧浣撳彉澶? color:"#B5B5B5"
}
},
name: "(鏃ユ湡)",
nameTextStyle: {
color: "#B5B5B5",
verticalAlign: "bottom",
fontSize:'10',
padding:[35,50,10,-2] //璁剧疆x杞寸殑鏍囬鐨勪綅缃? },
boundaryGap : false,
data:['2016-01','2016-07','2016-08','2016-09']
// data : ['鍛ㄤ竴','鍛ㄤ簩','鍛ㄤ笁','鍛ㄥ洓','鍛ㄤ簲','鍛ㄥ叚','鍛ㄦ棩']
}
]
yAxis
yAxis : [
{
type : 'VALUE',
splitNumber:2,//鎵€浠ュ皢 splitNumber璁炬垚3
axisLine: {
symbol: ['none', 'arrow'],
lineStyle: {
color: '#B5B5B5',
width: 2, //杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
}
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',//
color:'#FCFCFC'///缃戞牸棰滆壊
}
},
//鍒诲害鏄悜鍐呰繕鏄悜澶? axisTick:{
inside:true,
length:1,
},
axisLabel:{ //璋冩暣x杞寸殑lable
textStyle:{
fontSize:10,// 璁╁瓧浣撳彉澶? color:"#B5B5B5"
}
},
name: "(浜烘暟)",
nameLocation:"end", //瀹炵幇鏍囬鏄剧ず鐨勪綅缃? nameTextStyle:{
color: "#B5B5B5",
fontSize:10,
// verticalAlign: 'top',
// align:"left",
padding:[50,0,-6,0]
},
//axisLine : {onZero: false},
/* boundaryGap : false,
axisLabel : {
formatter: '{value} '
},
data:['AA-','AA','AA+']*/
}
]
dataRange: {
orient: 'vertical', // 甯冨眬鏂瑰紡锛岄粯璁や负鍨傜洿甯冨眬锛屽彲閫変负锛? // 'horizontal' | 'vertical'
x: 'left', // 姘村钩瀹夋斁浣嶇疆锛岄粯璁や负鍏ㄥ浘宸﹀榻愶紝鍙€変负锛? // 'center' | 'left' | 'right'
// | {number}锛坸鍧愭爣锛屽崟浣峱x锛? y: 'bottom', // 鍨傜洿瀹夋斁浣嶇疆锛岄粯璁や负鍏ㄥ浘搴曢儴锛屽彲閫変负锛? // 'top' | 'bottom' | 'center'
// | {number}锛坹鍧愭爣锛屽崟浣峱x锛? backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 鍊煎煙杈规棰滆壊
borderWidth: 0, // 鍊煎煙杈规绾垮锛屽崟浣峱x锛岄粯璁や负0锛堟棤杈规锛? padding: 5, // 鍊煎煙鍐呰竟璺濓紝鍗曚綅px锛岄粯璁ゅ悇鏂瑰悜鍐呰竟璺濅负5锛? // 鎺ュ彈鏁扮粍鍒嗗埆璁惧畾涓婂彸涓嬪乏杈硅窛锛屽悓css
itemGap: 10, // 鍚勪釜item涔嬮棿鐨勯棿闅旓紝鍗曚綅px锛岄粯璁や负10锛? // 妯悜甯冨眬鏃朵负姘村钩闂撮殧锛岀旱鍚戝竷灞€鏃朵负绾靛悜闂撮殧
itemWidth: 20, // 鍊煎煙鍥惧舰瀹藉害锛岀嚎鎬ф笎鍙樻按骞冲竷灞€瀹藉害涓鸿鍊?* 10
itemHeight: 14, // 鍊煎煙鍥惧舰楂樺害锛岀嚎鎬ф笎鍙樺瀭鐩村竷灞€楂樺害涓鸿鍊?* 10
splitNumber: 5, // 鍒嗗壊娈垫暟锛岄粯璁や负5锛屼负0鏃朵负绾挎€ф笎鍙? color:['#1e90ff','#f0ffff'],//棰滆壊
//text:['楂?#39;,'浣?#39;], // 鏂囨湰锛岄粯璁や负鏁板€兼枃鏈? textStyle: {
color: '#333' // 鍊煎煙鏂囧瓧棰滆壊
}
}toolbox: {
orient: 'horizontal', // 甯冨眬鏂瑰紡锛岄粯璁や负姘村钩甯冨眬锛屽彲閫変负锛? // 'horizontal' | 'vertical'
x: 'right', // 姘村钩瀹夋斁浣嶇疆锛岄粯璁や负鍏ㄥ浘鍙冲榻愶紝鍙€変负锛? // 'center' | 'left' | 'right'
// | {number}锛坸鍧愭爣锛屽崟浣峱x锛? y: 'top', // 鍨傜洿瀹夋斁浣嶇疆锛岄粯璁や负鍏ㄥ浘椤剁锛屽彲閫変负锛? // 'top' | 'bottom' | 'center'
// | {number}锛坹鍧愭爣锛屽崟浣峱x锛? color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
backgroundColor: 'rgba(0,0,0,0)', // 宸ュ叿绠辫儗鏅鑹? borderColor: '#ccc', // 宸ュ叿绠辫竟妗嗛鑹? borderWidth: 0, // 宸ュ叿绠辫竟妗嗙嚎瀹斤紝鍗曚綅px锛岄粯璁や负0锛堟棤杈规锛? padding: 5, // 宸ュ叿绠卞唴杈硅窛锛屽崟浣峱x锛岄粯璁ゅ悇鏂瑰悜鍐呰竟璺濅负5锛? // 鎺ュ彈鏁扮粍鍒嗗埆璁惧畾涓婂彸涓嬪乏杈硅窛锛屽悓css
itemGap: 10, // 鍚勪釜item涔嬮棿鐨勯棿闅旓紝鍗曚綅px锛岄粯璁や负10锛? // 妯悜甯冨眬鏃朵负姘村钩闂撮殧锛岀旱鍚戝竷灞€鏃朵负绾靛悜闂撮殧
itemSize: 16, // 宸ュ叿绠卞浘褰㈠搴? featureImageIcon : {}, // 鑷畾涔夊浘鐗噄con
featureTitle : {
mark : '杈呭姪绾垮紑鍏?#39;,
markUndo : '鍒犻櫎杈呭姪绾?#39;,
markClear : '娓呯┖杈呭姪绾?#39;,
dataZoom : '鍖哄煙缂╂斁',
dataZoomReset : '鍖哄煙缂╂斁鍚庨€€',
dataView : '鏁版嵁瑙嗗浘',
lineChart : '鎶樼嚎鍥惧垏鎹?#39;,
barChart : '鏌卞舰鍥惧垏鎹?#39;,
restore : '杩樺師',
saveAsImage : '淇濆瓨涓哄浘鐗?#39;
}
}
tooltip: {
trigger: 'item', // 瑙﹀彂绫诲瀷锛岄粯璁ゆ暟鎹Е鍙戯紝瑙佷笅鍥撅紝鍙€変负锛?#39;item' | 'axis'
showDelay: 20, // 鏄剧ず寤惰繜锛屾坊鍔犳樉绀哄欢杩熷彲浠ラ伩鍏嶉绻佸垏鎹紝鍗曚綅ms
hideDelay: 100, // 闅愯棌寤惰繜锛屽崟浣峬s
transitionDuration : 0.4, // 鍔ㄧ敾鍙樻崲鏃堕棿锛屽崟浣峴
backgroundColor: 'rgba(0,0,0,0.7)', // 鎻愮ず鑳屾櫙棰滆壊锛岄粯璁や负閫忔槑搴︿负0.7鐨勯粦鑹? borderColor: '#333', // 鎻愮ず杈规棰滆壊
borderRadius: 4, // 鎻愮ず杈规鍦嗚锛屽崟浣峱x锛岄粯璁や负4
borderWidth: 0, // 鎻愮ず杈规绾垮锛屽崟浣峱x锛岄粯璁や负0锛堟棤杈规锛? padding: 5, // 鎻愮ず鍐呰竟璺濓紝鍗曚綅px锛岄粯璁ゅ悇鏂瑰悜鍐呰竟璺濅负5锛? // 鎺ュ彈鏁扮粍鍒嗗埆璁惧畾涓婂彸涓嬪乏杈硅窛锛屽悓css
axisPointer : { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
type : 'line', // 榛樿涓虹洿绾匡紝鍙€変负锛?#39;line' | 'shadow'
lineStyle : { // 鐩寸嚎鎸囩ず鍣ㄦ牱寮忚缃? color: '#48b',
width: 2,
type: 'solid'
},
shadowStyle : { // 闃村奖鎸囩ず鍣ㄦ牱寮忚缃? width: 'auto', // 闃村奖澶у皬
color: 'rgba(150,150,150,0.3)' // 闃村奖棰滆壊
}
},
textStyle: {
color: '#fff'
}
}
xAxis
xAxis : [
{
type : 'category',
axisLine: {
symbol: ['none', 'arrow'], //璁剧疆x杞存垨y杞寸澶? lineStyle: {
color: '#B5B5B5',
width: 2, //杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
}
},
//鍒诲害鏄悜鍐呰繕鏄悜澶? axisTick:{
inside:true,
length:1,
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color:'#FCFCFC',//缃戞牸棰滆壊
}
},
axisLabel:{ //璋冩暣x杞寸殑lable
//interval:0, //鎸墄杞寸殑闀垮害鏄剧ず鐨勫埢搴︾殑涓暟 渚嬪锛氭湰鏉ユ樉绀?0涓埢搴︼紝鍥犱负x杞寸鍙樉绀轰簡10涓紝
rotate:0, //瀹炵幇x杞寸殑鍒诲害鐨勬爣璇嗗疄鐜版棆杞紝
textStyle:{
fontSize:10,// 璁╁瓧浣撳彉澶? color:"#B5B5B5"
}
},
name: "(鏃ユ湡)",
nameTextStyle: {
color: "#B5B5B5",
verticalAlign: "bottom",
fontSize:'10',
padding:[35,50,10,-2] //璁剧疆x杞寸殑鏍囬鐨勪綅缃? },
boundaryGap : false,
data:['2016-01','2016-07','2016-08','2016-09']
// data : ['鍛ㄤ竴','鍛ㄤ簩','鍛ㄤ笁','鍛ㄥ洓','鍛ㄤ簲','鍛ㄥ叚','鍛ㄦ棩']
}
]
yAxis
yAxis : [
{
type : 'VALUE',
splitNumber:2,//鎵€浠ュ皢 splitNumber璁炬垚3
axisLine: {
symbol: ['none', 'arrow'],
lineStyle: {
color: '#B5B5B5',
width: 2, //杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
}
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',//
color:'#FCFCFC'///缃戞牸棰滆壊
}
},
//鍒诲害鏄悜鍐呰繕鏄悜澶? axisTick:{
inside:true,
length:1,
},
axisLabel:{ //璋冩暣x杞寸殑lable
textStyle:{
fontSize:10,// 璁╁瓧浣撳彉澶? color:"#B5B5B5"
}
},
name: "(浜烘暟)",
nameLocation:"end", //瀹炵幇鏍囬鏄剧ず鐨勪綅缃? nameTextStyle:{
color: "#B5B5B5",
fontSize:10,
// verticalAlign: 'top',
// align:"left",
padding:[50,0,-6,0]
},
//axisLine : {onZero: false},
/* boundaryGap : false,
axisLabel : {
formatter: '{value} '
},
data:['AA-','AA','AA+']*/
}
]
xAxis : [
{
type : 'category',
axisLine: {
symbol: ['none', 'arrow'], //璁剧疆x杞存垨y杞寸澶? lineStyle: {
color: '#B5B5B5',
width: 2, //杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
}
},
//鍒诲害鏄悜鍐呰繕鏄悜澶? axisTick:{
inside:true,
length:1,
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color:'#FCFCFC',//缃戞牸棰滆壊
}
},
axisLabel:{ //璋冩暣x杞寸殑lable
//interval:0, //鎸墄杞寸殑闀垮害鏄剧ず鐨勫埢搴︾殑涓暟 渚嬪锛氭湰鏉ユ樉绀?0涓埢搴︼紝鍥犱负x杞寸鍙樉绀轰簡10涓紝
rotate:0, //瀹炵幇x杞寸殑鍒诲害鐨勬爣璇嗗疄鐜版棆杞紝
textStyle:{
fontSize:10,// 璁╁瓧浣撳彉澶? color:"#B5B5B5"
}
},
name: "(鏃ユ湡)",
nameTextStyle: {
color: "#B5B5B5",
verticalAlign: "bottom",
fontSize:'10',
padding:[35,50,10,-2] //璁剧疆x杞寸殑鏍囬鐨勪綅缃? },
boundaryGap : false,
data:['2016-01','2016-07','2016-08','2016-09']
// data : ['鍛ㄤ竴','鍛ㄤ簩','鍛ㄤ笁','鍛ㄥ洓','鍛ㄤ簲','鍛ㄥ叚','鍛ㄦ棩']
}
]
yAxis : [
{
type : 'VALUE',
splitNumber:2,//鎵€浠ュ皢 splitNumber璁炬垚3
axisLine: {
symbol: ['none', 'arrow'],
lineStyle: {
color: '#B5B5B5',
width: 2, //杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
}
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',//
color:'#FCFCFC'///缃戞牸棰滆壊
}
},
//鍒诲害鏄悜鍐呰繕鏄悜澶? axisTick:{
inside:true,
length:1,
},
axisLabel:{ //璋冩暣x杞寸殑lable
textStyle:{
fontSize:10,// 璁╁瓧浣撳彉澶? color:"#B5B5B5"
}
},
name: "(浜烘暟)",
nameLocation:"end", //瀹炵幇鏍囬鏄剧ず鐨勪綅缃? nameTextStyle:{
color: "#B5B5B5",
fontSize:10,
// verticalAlign: 'top',
// align:"left",
padding:[50,0,-6,0]
},
//axisLine : {onZero: false},
/* boundaryGap : false,
axisLabel : {
formatter: '{value} '
},
data:['AA-','AA','AA+']*/
}
]
绫讳技娓╂箍搴︾殑涓や釜y杞村彲浠ラ噰鐢ㄤ互涓嬩唬鐮?/p>
yAxis: [ //Y杞达紙杩欓噷鎴戣缃簡涓や釜Y杞达紝宸﹀彸鍚勪竴涓級
{
//绗竴涓紙宸﹁竟锛塝杞达紝yAxisIndex涓?
type: 'value',
name: '娓╁害',
max: 120,
min: 0,
axisLabel: {
formatter: '{value} 鈩?#39; //鎺у埗杈撳嚭鏍煎紡
},
splitLine: {
show: false
}
},
{
//绗簩涓紙鍙宠竟锛塝杞达紝yAxisIndex涓?
type: 'value',
name: '婀垮害',
max: 100,
min: 0,
scale: true,
axisLabel: {
formatter: '{value} %'
},
splitLine: {
show: false
}
}
]
鍦╯eries灞炴€т腑鎻掑叆浠ヤ笅鐨勪唬鐮?code>yAxisIndex: 鈥?鈥?/code>鍗冲彲鍑嗙‘琛ㄧず銆?/p>
timeline:{
axisType :'category',
orient:'vertical',
autoPlay :true,
playInterval :15000,
right: '5',
left:'320',
top:'0',
bottom:'0',
label:{
interval:0,
formatter: function (item) {
var str = item.split("-")[1];
return parseInt(str)+'鏈?#39;;
}
},
data:monthArr,
currentIndex : index,
controlStyle:{
showPlayBtn :false
}
}
绗簩绉?/p>
timeline: {
show: true,
axisType: 'category',
autoPlay: true,
currentIndex: 5,
playInterval: 5000,
symbolSize: 12,
checkpointStyle: {
symbol: 'circle',
symbolSize: 18,
color: '#00d3e7',
borderWidth: 2,
borderColor: "#00d3e7"
}
dataZoom缁勪欢
dataZoom:[ //鍖哄煙缂╂斁
{
銆€銆€id: 'dataZoomX',
銆€銆€show:true, //鏄惁鏄剧ず 缁勪欢銆傚鏋滆缃负 false锛屼笉浼氭樉绀猴紝浣嗘槸鏁版嵁杩囨护鐨勫姛鑳借繕瀛樺湪銆?
銆€銆€backgroundColor:"rgba(47,69,84,0)", //缁勪欢鐨勮儗鏅鑹?
銆€銆€type: 'slider', //slider琛ㄧず鏈夋粦鍔ㄥ潡鐨勶紝inside琛ㄧず鍐呯疆鐨?
銆€銆€dataBackground:{ //鏁版嵁闃村奖鐨勬牱寮忋€?
銆€銆€銆€銆€lineStyle:mylineStyle, //闃村奖鐨勭嚎鏉℃牱寮?
銆€銆€銆€銆€areaStyle:myareaStyle, //闃村奖鐨勫～鍏呮牱寮?
銆€銆€},
銆€銆€fillerColor:"rgba(167,183,204,0.4)", //閫変腑鑼冨洿鐨勫～鍏呴鑹层€?
銆€銆€borderColor:"#ddd", //杈规棰滆壊銆?
銆€銆€filterMode: 'filter', //'filter'锛氬綋鍓嶆暟鎹獥鍙ｅ鐨勬暟鎹紝琚?杩囨护鎺夈€傚嵆 浼?褰卞搷鍏朵粬杞寸殑鏁版嵁鑼冨洿銆傛瘡涓暟鎹」锛屽彧瑕佹湁涓€涓淮搴﹀湪鏁版嵁绐楀彛澶栵紝鏁翠釜鏁版嵁椤瑰氨浼氳杩囨护鎺夈€?
銆€銆€銆€銆€銆€銆€銆€銆€銆€銆€//'weakFilter'锛氬綋鍓嶆暟鎹獥鍙ｅ鐨勬暟鎹紝琚?杩囨护鎺夈€傚嵆 浼?褰卞搷鍏朵粬杞寸殑鏁版嵁鑼冨洿銆傛瘡涓暟鎹」锛屽彧鏈夊綋鍏ㄩ儴缁村害閮藉湪鏁版嵁绐楀彛鍚屼晶澶栭儴锛屾暣涓暟鎹」鎵嶄細琚繃婊ゆ帀銆?
銆€銆€銆€銆€銆€銆€銆€銆€銆€銆€//'empty'锛氬綋鍓嶆暟鎹獥鍙ｅ鐨勬暟鎹紝琚?璁剧疆涓虹┖銆傚嵆 涓嶄細 褰卞搷鍏朵粬杞寸殑鏁版嵁鑼冨洿銆?
銆€銆€銆€銆€銆€銆€銆€銆€銆€銆€//'none': 涓嶈繃婊ゆ暟鎹紝鍙敼鍙樻暟杞磋寖鍥淬€?
銆€銆€xAxisIndex:0, //璁剧疆 dataZoom-inside 缁勪欢鎺у埗鐨?x杞?鍙互鐢ㄦ暟缁勮〃绀哄涓酱
銆€銆€yAxisIndex:[0,2], //璁剧疆 dataZoom-inside 缁勪欢鎺у埗鐨?y杞?鍙互鐢ㄦ暟缁勮〃绀哄涓酱
銆€銆€radiusAxisIndex:3, //璁剧疆 dataZoom-inside 缁勪欢鎺у埗鐨?radius 杞?鍙互鐢ㄦ暟缁勮〃绀哄涓酱
銆€銆€angleAxisIndex:[0,2], //璁剧疆 dataZoom-inside 缁勪欢鎺у埗鐨?angle 杞?鍙互鐢ㄦ暟缁勮〃绀哄涓酱
銆€銆€start: 30, //鏁版嵁绐楀彛鑼冨洿鐨勮捣濮嬬櫨鍒嗘瘮,琛ㄧず30%
銆€銆€end: 70, //鏁版嵁绐楀彛鑼冨洿鐨勭粨鏉熺櫨鍒嗘瘮,琛ㄧず70%
銆€銆€startValue:10, //鏁版嵁绐楀彛鑼冨洿鐨勮捣濮嬫暟鍊?
銆€銆€endValue:100, //鏁版嵁绐楀彛鑼冨洿鐨勭粨鏉熸暟鍊笺€?
銆€銆€orient:"horizontal", //甯冨眬鏂瑰紡鏄í杩樻槸绔栥€備笉浠呮槸甯冨眬鏂瑰紡锛屽浜庣洿瑙掑潗鏍囩郴鑰岃█锛屼篃鍐冲畾浜嗭紝缂虹渷鎯呭喌鎺у埗妯悜鏁拌酱杩樻槸绾靛悜鏁拌酱銆?#39;horizontal'锛氭按骞炽€?#39;vertical'锛氱珫鐩淬€?
銆€銆€zoomLock:false, //鏄惁閿佸畾閫夋嫨鍖哄煙锛堟垨鍙仛鏁版嵁绐楀彛锛夌殑澶у皬銆傚鏋滆缃负 true
銆€銆€鍒欓攣瀹氶€夋嫨鍖哄煙鐨勫ぇ灏忥紝涔熷氨鏄锛屽彧鑳藉钩绉伙紝涓嶈兘缂╂斁銆?
銆€銆€throttle:100, //璁剧疆瑙﹀彂瑙嗗浘鍒锋柊鐨勯鐜囥€傚崟浣嶄负姣锛坢s锛夈€?
銆€銆€zoomOnMouseWheel:true, //濡備綍瑙﹀彂缂╂斁銆傚彲閫夊€间负锛歵rue锛氳〃绀轰笉鎸変换浣曞姛鑳介敭锛岄紶鏍囨粴杞兘瑙﹀彂缂╂斁銆俧alse锛氳〃绀洪紶鏍囨粴杞笉鑳借Е鍙戠缉鏀俱€?#39;shift'锛氳〃绀烘寜浣?shift 鍜岄紶鏍囨粴杞兘瑙﹀彂缂╂斁銆?#39;ctrl'锛氳〃绀烘寜浣?ctrl 鍜岄紶鏍囨粴杞兘瑙﹀彂缂╂斁銆?#39;alt'锛氳〃绀烘寜浣?alt 鍜岄紶鏍囨粴杞兘瑙﹀彂缂╂斁銆?
銆€銆€moveOnMouseMove:true, //濡備綍瑙﹀彂鏁版嵁绐楀彛骞崇Щ銆倀rue锛氳〃绀轰笉鎸変换浣曞姛鑳介敭锛岄紶鏍囩Щ鍔ㄨ兘瑙﹀彂鏁版嵁绐楀彛骞崇Щ銆俧alse锛氳〃绀洪紶鏍囨粴杞笉鑳借Е鍙戠缉鏀俱€?#39;shift'锛氳〃绀烘寜浣?shift 鍜岄紶鏍囩Щ鍔ㄨ兘瑙﹀彂鏁版嵁绐楀彛骞崇Щ銆?#39;ctrl'锛氳〃绀烘寜浣?ctrl 鍜岄紶鏍囩Щ鍔ㄨ兘瑙﹀彂鏁版嵁绐楀彛骞崇Щ銆?#39;alt'锛氳〃绀烘寜浣?alt 鍜岄紶鏍囩Щ鍔ㄨ兘瑙﹀彂鏁版嵁绐楀彛骞崇Щ銆?
銆€銆€left:"center", //缁勪欢绂诲鍣ㄥ乏渚х殑璺濈,'left', 'center', 'right','20%'
銆€銆€top:"top", //缁勪欢绂诲鍣ㄤ笂渚х殑璺濈,'top', 'middle', 'bottom','20%'
銆€銆€right:"auto", //缁勪欢绂诲鍣ㄥ彸渚х殑璺濈,'20%'
銆€銆€bottom:"auto", //缁勪欢绂诲鍣ㄤ笅渚х殑璺濈,'20%'
},
{
銆€銆€id: 'dataZoomY',
銆€銆€type: 'inside',
銆€銆€filterMode: 'empty',
銆€銆€disabled:false, //鏄惁鍋滄缁勪欢鐨勫姛鑳姐€?
銆€銆€xAxisIndex:0, //璁剧疆 dataZoom-inside 缁勪欢鎺у埗鐨?x杞?鍙互鐢ㄦ暟缁勮〃绀哄涓酱
銆€銆€yAxisIndex:[0,2], //璁剧疆 dataZoom-inside 缁勪欢鎺у埗鐨?y杞?鍙互鐢ㄦ暟缁勮〃绀哄涓酱
銆€銆€radiusAxisIndex:3, //璁剧疆 dataZoom-inside 缁勪欢鎺у埗鐨?radius 杞?鍙互鐢ㄦ暟缁勮〃绀哄涓酱
銆€銆€angleAxisIndex:[0,2], //璁剧疆 dataZoom-inside 缁勪欢鎺у埗鐨?angle 杞?鍙互鐢ㄦ暟缁勮〃绀哄涓酱
銆€銆€start: 30, //鏁版嵁绐楀彛鑼冨洿鐨勮捣濮嬬櫨鍒嗘瘮,琛ㄧず30%
銆€銆€end: 70, //鏁版嵁绐楀彛鑼冨洿鐨勭粨鏉熺櫨鍒嗘瘮,琛ㄧず70%
銆€銆€startValue:10, //鏁版嵁绐楀彛鑼冨洿鐨勮捣濮嬫暟鍊?
銆€銆€endValue:100, //鏁版嵁绐楀彛鑼冨洿鐨勭粨鏉熸暟鍊笺€?
銆€銆€orient:"horizontal", //甯冨眬鏂瑰紡鏄í杩樻槸绔栥€備笉浠呮槸甯冨眬鏂瑰紡锛屽浜庣洿瑙掑潗鏍囩郴鑰岃█锛屼篃鍐冲畾浜嗭紝缂虹渷鎯呭喌鎺у埗妯悜鏁拌酱杩樻槸绾靛悜鏁拌酱銆?#39;horizontal'锛氭按骞炽€?#39;vertical'锛氱珫鐩淬€?
銆€銆€zoomLock:false, //鏄惁閿佸畾閫夋嫨鍖哄煙锛堟垨鍙仛鏁版嵁绐楀彛锛夌殑澶у皬銆傚鏋滆缃负 true 鍒欓攣瀹氶€夋嫨鍖哄煙鐨勫ぇ灏忥紝涔熷氨鏄锛屽彧鑳藉钩绉伙紝涓嶈兘缂╂斁銆?
銆€銆€throttle:100, //璁剧疆瑙﹀彂瑙嗗浘鍒锋柊鐨勯鐜囥€傚崟浣嶄负姣锛坢s锛夈€?
銆€銆€zoomOnMouseWheel:true, //濡備綍瑙﹀彂缂╂斁銆傚彲閫夊€间负锛歵rue锛氳〃绀轰笉鎸変换浣曞姛鑳介敭锛岄紶鏍囨粴杞兘瑙﹀彂缂╂斁銆俧alse锛氳〃绀洪紶鏍囨粴杞笉鑳借Е鍙戠缉鏀俱€?#39;shift'锛氳〃绀烘寜浣?shift 鍜岄紶鏍囨粴杞兘瑙﹀彂缂╂斁銆?#39;ctrl'锛氳〃绀烘寜浣?ctrl 鍜岄紶鏍囨粴杞兘瑙﹀彂缂╂斁銆?#39;alt'锛氳〃绀烘寜浣?alt 鍜岄紶鏍囨粴杞兘瑙﹀彂缂╂斁銆?
銆€銆€moveOnMouseMove:true, //濡備綍瑙﹀彂鏁版嵁绐楀彛骞崇Щ銆倀rue锛氳〃绀轰笉鎸変换浣曞姛鑳介敭锛岄紶鏍囩Щ鍔ㄨ兘瑙﹀彂鏁版嵁绐楀彛骞崇Щ銆俧alse锛氳〃绀洪紶鏍囨粴杞笉鑳借Е鍙戠缉鏀俱€?#39;shift'锛氳〃绀烘寜浣?shift 鍜岄紶鏍囩Щ鍔ㄨ兘瑙﹀彂鏁版嵁绐楀彛骞崇Щ銆?#39;ctrl'锛氳〃绀烘寜浣?ctrl 鍜岄紶鏍囩Щ鍔ㄨ兘瑙﹀彂鏁版嵁绐楀彛骞崇Щ銆?#39;alt'锛氳〃绀烘寜浣?alt 鍜岄紶鏍囩Щ鍔ㄨ兘瑙﹀彂鏁版嵁绐楀彛骞崇Щ銆?
}
]
series
series: [
{
name: '娓╁害锛堚剝锛?#39;,
type: 'line', //鎶樼嚎鍥捐〃绀猴紙鐢熸垚娓╁害鏇茬嚎锛? symbol: 'emptycircle', //璁剧疆鎶樼嚎鍥句腑琛ㄧず姣忎釜鍧愭爣鐐圭殑绗﹀彿锛沞mptycircle锛氱┖蹇冨渾锛沞mptyrect锛氱┖蹇冪煩褰紱circle锛氬疄蹇冨渾锛沞mptydiamond锛氳彵褰? stack: 鎬婚噺, //鍐欎竴鏍蜂細鏈夌疮鍔犵殑鏁堟灉
areaStyle: {},
markPoint: {
data: [
{type: 'max', name: '鏈€澶у€?#39;},
{type: 'min', name: '鏈€灏忓€?#39;}
]
}//闈㈢Н鐨勯槾褰? data: [110, 20, 56, 36, 96, 58, 25], //鏁版嵁鍊奸€氳繃Ajax鍔ㄦ€佽幏鍙? },
{
name: '婀垮害锛?锛?#39;,
yAxisIndex: '1', //瀹氫綅鍒扮浜屼釜鍧愭爣杞? type: 'line',
symbol: 'emptyrect',
data: [45, 63, 10, 62, 35, 88, 66]
},]
Echarts 璁剧疆
寮傛鏁版嵁鍔犺浇
绗竴绉?/p>
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: '寮傛鏁版嵁鍔犺浇绀轰緥'
},
tooltip: {},
legend: {
data:['閿€閲?#39;]
},
xAxis: {
data: ["琛～","缇婃瘺琛?quot;,"闆汉琛?quot;,"瑁ゅ瓙","楂樿窡闉?quot;,"琚滃瓙"]
},
yAxis: {},
series: [{
name: '閿€閲?#39;,
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
绗簩绉?/p>
var myChart = echarts.init(document.getElementById('main'));
// 鏄剧ず鏍囬锛屽浘渚嬪拰绌虹殑鍧愭爣杞?myChart.setOption({
title: {
text: '寮傛鏁版嵁鍔犺浇绀轰緥'
},
tooltip: {},
legend: {
data:['閿€閲?#39;]
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '閿€閲?#39;,
type: 'bar',
data: []
}]
});
// 寮傛鍔犺浇鏁版嵁
$.get('data.json').done(function (data) {
// 濉叆鏁版嵁
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 鏍规嵁鍚嶅瓧瀵瑰簲鍒扮浉搴旂殑绯诲垪
name: '閿€閲?#39;,
data: data.data
}]
});
});
loading鍔ㄧ敾
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});
姝ゆ枃绔犻儴鍒嗘惉杩愶紝閮ㄥ垎鍘熷垱锛屼絾鐢变簬澶氭淇锛屾惉杩愮殑鍦板潃閬楀け锛屽鏈変镜鏉冿紝楹荤儲鑱旂郴鎴戠殑閭銆?/strong>
以上是关于Echars璁茶В鍒嗘瀽的主要内容，如果未能解决你的问题，请参考以下文章
鏁欏コ鏈嬪弸璇绘噦绯诲垪锛歞ubbo鐨勫彲鎵╁睍鏈哄埗SPI 婧愮爜鍒嗘瀽
娣卞叆婧愮爜鍒嗘瀽锛岀紦瀛樹箣鐜?Caffeine 涓轰綍杩欎箞鐚?
鍏充簬鈥滆瘲璇嶅ぇ闂叧鈥濈殑璋冩煡琛ㄤ笌璋冩煡缁撴灉鍒嗘瀽