echarts常用修改位置

(一)修改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
        }]
    };

你可能感兴趣的:(echarts常用修改位置)