echarts的官網(wǎng)：http://echarts.baidu.com/
echarts的概念：一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級的 Canvas 類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數(shù)據(jù)可視化圖表
折線常用屬性
splitLine:設(shè)置網(wǎng)格背景；
textStyle：設(shè)置樣式（字體）；
lineStyle：設(shè)置坐標(biāo)軸的線的樣式；
areaStyle：折線區(qū)域的背景
var myChart = echarts.init(document.getElementById('echarts1'));
option = {
title: {
text: '水導(dǎo)擺度特征值',
x: 'center',
textStyle: {
color: 'rgba(0,0,0,0.1)',
fontSize: 12
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['郵件營銷', '聯(lián)盟廣告', '視頻廣告', '直接訪問', '搜索引擎']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
color: '#08ffb0',
xAxis: [{
name: '單位(數(shù)量)',
type: 'category',
boundaryGap: false,//折線的起始點
splitLine: {
show: true,
intercal: 'auto',
lineStyle: {
width: 2,
type:"dotted",
color: 'rgba(255, 255, 255, 0.2)',
fontSize:16
}
},
textStyle: {
color: '#eee',
fontSize: 16
},
axisLabel: {
show: true,
interval: 'auto',
textStyle: {
color: '#fff',
fontSize: 16
}
},
axisLine: {
lineStyle: {
color: '#fff',
width: 2,
fontSize: 16
}
},
data: ['1', '2', '3', '4', '5', '6',
'7', '8', '9', '10','11','12','13',
'14','15','16','17','18','19','20',
'21', '22', '23', '24', '25', '26',
'27', '28', '29', '30',]
}
],
yAxis: [{
name: '單位(數(shù)量)',
type: 'value',
axisLabel: {
show: true,
interval: 'auto',
},
axisLine: {
lineStyle: {
color: '#fff',
width: 2,
fontSize: 16
}
},
splitLine: {
show: true,
intercal: 'auto',
lineStyle: {
width: 2,
type:"dotted",
fontSize: 16,
color: 'rgba(255, 255, 255, 0.2)'
}
},
}],
series: [{
name: '水導(dǎo)擺度特征值',
type: 'line',
stack: '總量',
lineStyle: {
normal: {
width: 2,
color: '#08ffb0'
}
},
markLine: {
data: [{
type: 'average',
name: '平均值',
lineStyle: {
color: '#ffd033',
type:"solid",
width: 2,
}
}]
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#08ffb0'
}, {
offset: 0.001,
color: 'rgba(33, 198, 160, 0.35)'
}, {
offset: 0.8,
color: 'rgba(0, 0, 0, 0.15)'
}], false),
shadowColor: 'rgba(255, 255, 2, 0.1)',
shadowBlur: 10
}
},
data: [80, 132, 101, 134,110,120,100, 99,116, 95,
80,93, 100, 130,120,151,132, 184,210,220,
211, 222, 221, 234,143,157,180,166,177,210
]
}]
}
myChart.setOption(option);
餅圖常用屬性
textStyle：字體顏色
backgroundColor：背景顏色
option = {
backgroundColor: '#2c343c',
title: {
text: '餅狀圖',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/> : {c} (u0z1t8os%)"http://提示信息
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]//顯示的色彩
}
},
series : [
{
name:'訪問來源',
type:'pie',
radius : '55%',
center: ['50%', '50%'],//位置
data:[
{
是以key，value形式的數(shù)據(jù)
}
].sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
柱狀圖
xAxis :x軸；
yAxis ：y軸
app.title = '柱狀圖';
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type : 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'提示',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
