记录折线图的一些基本设置：
1.折线图背景颜色
2.标题字颜色、大小，小标题字颜色、大小
3.xy轴颜色、xy轴字旋转、去掉x轴网格、去掉xy轴网格线、xy轴坐标线的宽度、颜色
4.legend颜色
5.折线图距离上下左右的位置、折线的弧度、去掉折线节点的小圆点
6.鼠标滚轮滚动放大缩小
7.鼠标移入显示信息
8.图形切换工具
完整代码如****意显示导入echarts.js）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
<script type="text/javascript">
window.onload=function () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
backgroundColor:'bisque', //设置图标的背景颜色
title: {
text: '在校学生人数',
subtext: '最新统计表', //小标题
subtextStyle: { //小标题颜色
color: '#ff4536'
},
textStyle: { //标题颜色
color: '#380c3c'
}
},
xAxis: {
type: 'category',
splitLine:{show: false},//去除x轴网格线
splitArea : {show : false},//去掉网格区域
axisLine: { //设置x轴坐标线的样式
lineStyle: {
type: 'solid',
color: '#161616',//x轴坐标线的颜色
width:'1'//x轴坐标线的宽度
}
},
axisLabel: { //x轴刻度数值颜色
rotate: 10, //旋转x轴的文字
interval:0, //x轴每个项的距离 修改数据显示的个数
textStyle: {
color: '#1b1b1b'
}
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'] //x轴数据项
},
yAxis: {
type: 'value',
splitArea : {show : false},//去掉网格区域
axisLine: { //设置y轴坐标线的样式
lineStyle: {
type: 'solid',
color: '#161616',//y轴坐标线的颜色
width:'1'//y轴坐标线的宽度
}
},
axisLabel: { //y轴刻度数值颜色
rotate: 10, //旋转y轴的文字
interval:0, //y轴每个项的距离 修改数据显示的个数
textStyle: {
color: '#1b1b1b'
}
},
},
toolbox: { //图形切换工具
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {
data:['学校A','学校B'] //这里的值对应series的name
},
color:['#ffa414','#30903f'], //设置legend颜色
grid: { //设置图标距离上下左右的距离 top一般默认
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
dataZoom: [ //放大缩小
{
type: 'inside'
}
],
tooltip: { //鼠标移动到折线上 显示信息
trigger: 'axis'
},
series: [ //显示的折线个量
{
name:'学校A',
type:'line',
symbol:'none', //去掉折线图每个节点的小圆点
smooth:'0.2', //设置折线图的弧度 值：0-1之间
stack: '学校a在校人数',
lineStyle:{ //设置折线颜色
normal:{
color:'#ffa414',
width:3
}
},
data: [950, 610, 1050, 625, 502, 336, 340]
},
{
name:'学校B',
type:'line',
stack: '学校b在校人数', //这里名字不要一样
lineStyle:{
normal:{
color:'#30903f',
width:3
}
},
data:[750, 210, 130, 450, 520, 620, 940]
},
]
};
var zoomSize = 90; //放大缩小
myChart.on('click', function (params) {
console.log(name[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
});
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;margin: 100px auto"></div>
</body>
</html>