(一)修改echarts图表距离外部div上下左右的位置
grid: {
left: ‘6%’,
right: ‘4%’,
bottom: ‘12%’,
top: ‘15%’
},
(二) Echarts实现隐藏x轴,y轴,刻度线,网格
yAxis: {
show: true,
type: ‘value’,
splitLine:{show: false}, //去除网格线
nameTextStyle:{
color:’#abb8ce’
},
axisLabel: {
color:’#abb8ce’,
},
axisTick:{ //y轴刻度线
show:false
},
axisLine:{ //y轴
show:false
},
},
(三)修改顶部隐藏显示数据位置
legend: {
data: config.legend,
top: 20,
},
legend: {
algin: 'vertical',
y: '0',
x: '210',
orient: 'horizontal',
icon: "pin",
},
legend: {
top: -8,
right: 0,
itemGap:4,//图与图之间的距离
itemHeight: 10,//图的大小
icon: "circle",
textStyle: { //图例文字的样式
fontSize: 12,
padding:[0,0,0,-5]//图与文字之间的距离
},
data: ['尖', '峰', '平', '谷']
},
legend: {
icon: "circle", // 字段控制形状 类型包括 circle,rect,line,roundRect,triangle,diamond,pin,arrow,none
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 40 // 设置间距
},
icon 可自定义图片
icon : 'image://../../images/hsyb/water.png' /* image:// 后跟图片路径*/
(四)
function echarts_a(Temperature,time) {
var myChart = echarts.init(document.getElementById(‘main’));
var option = {
xAxis: {
type: ‘category’,
data: time,
},
//修改鼠标移入显示数据
tooltip: {
formatter: function (data) {
console.log(data, “data”)
return ‘时间:’ + data.name + ‘
’ + ‘温度:’ + data.data.toFixed(2)
}
},
yAxis: [
{
type: ‘value’,
axisLabel: { formatter: '{value} ℃' }
}
],
//x轴下面拖动
dataZoom: [
{
type: 'slider',//数据滑块
start: 0,
minSpan: 8, //5min
// minSpan:16, //10min
// minSpan:24, //15min
// minSpan:50, //30min
dataBackground: {
lineStyle: {
color: '#95BC2F'
},
areaStyle: {
color: '#95BC2F',
opacity: 1,
}
},
// fillerColor:'rgba(255,255,255,.6)'
},
{
type: 'inside'//使鼠标在图表中时滚轮可用
}
],
series: [{
data: Temperature,
//折线的颜色
itemStyle: {
normal: {
//折线点的颜色
color: '#53C6FF',
lineStyle: {
color: '#53C6FF'
}
}
},
type: 'line',
smooth: true
}]
};