echarts的官网：http://echarts.baidu.com/
echarts的概念：一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表
折线常用属性
splitLine:设置网格背景；
textStyle：设置样式（字体）；
lineStyle：设置坐标轴的线的样式；
areaStyle：折线区域的背景
var myChart = echarts.init(document.getElementById('echarts1'));
option = {
title: {
text: '水导摆度特征值',
x: 'center',
textStyle: {
color: 'rgba(0,0,0,0.1)',
fontSize: 12
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
color: '#08ffb0',
xAxis: [{
name: '单位(数量)',
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: '单位(数量)',
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: '水导摆度特征值',
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/>{b} : {c} ({d}%)"//提示信息
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]//显示的色彩
}
},
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '50%'],//位置
data:[
{
是以key，value形式的数据
}
].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 : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'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]
}
]
};
