Echarts折线图之改变网线,X/Y轴的颜色,折线的颜色
<!-- echarts 未来一个星期的天气 -->
<div class="chart" id="lineChart"></div>
var echartsFn = function(time,data1,data2){
var getOption = function(chartType) {
var chartOption ={
calculable: false,
legend: {
data: ['最高温', '最低温'],
textStyle:{//图例文字的样式
color:'#fff',
fontSize:12
}
},
grid: {
x: 35,
x2: 10,
y: 30,
y2: 25
},
toolbox: {
show: false,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: false,
xAxis: [{
type: 'category',
data: time,
nameTextStyle: {
color: '#0A0026'
},
axisLine:{ //x轴线
show:true,
lineStyle: {
color: '#ffffff'
}
},
splitLine: {
show:false, //X网格线
lineStyle:{ //x网格线
color: '#ffffff'
}
}
}],
yAxis: [{
type: 'value',
splitArea: {
show: false //y网格区域颜色
},
splitLine: {
show:false, //y网格线
lineStyle:{
color: '#ffffff'
}
},
nameTextStyle: {
color: '#640A26'
},
axisLine: {
show:true,
lineStyle: {
color:'#ffffff' //Y轴颜色
}
}
}],
series: [{
name: '最高温',
type: chartType,
symbol: 'circle',//折线点设置为实心点
symbolSize: 2, //折线点的大小
data: data1,
itemStyle : {
normal : {
color: ['#cccccc'], //圈圈的颜色
lineStyle: {
color: '#640A26', //曲线的颜色
width:1
}
}
}
}, {
name: '最低温',
type: chartType,
symbol: 'circle',//折线点设置为实心点
symbolSize: 2, //折线点的大小
data: data2,
itemStyle : {
normal : {
color:'#ffffff', //圈圈的颜色
lineStyle: {
color:'#ffffff', //曲线的颜色
width:1
}
}
}
},]
};
return chartOption;
};
var byId = function(id) {
return document.getElementById(id);
};
var lineChart = echarts.init(byId('lineChart'));
lineChart.setOption(getOption('line'));
};//echartsFn
另外,分享一个echarts教程,很详细,很有用;
https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-k7c12cly.html