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://  后跟图片路径*/

(四)x轴下面拖动

  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 + '<br/>' + '温度:' + 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
            }]
        };

(五)y轴去掉外面的边框线

    axisLine: {show:false},
   axisTick: {show:false},

y轴线全部去掉

  splitLine:{show:false},

(六)y轴数值幅度
如果数值比较平缓 需要看上去有幅度 添加
yAxis: {
scale:true,
boundaryGap: [‘80%’, ‘20%’],
}

(六)折线圆滑效果
给折线添加圆滑效果
series: [
{smooth: true,}
]

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值