echarts 折线图(波纹) 隐藏线点文字

效果

在这里插入图片描述

隐藏线点文字 曲线

{
    name: '水泥',
    z:2, // 显示层级
    type: 'line',
    symbol: "none", // 去除小圆点
    //stack: '总量', //数据高度叠加
    areaStyle: {},
    lineStyle: {width: 0,color: 'rgba(0, 0, 0, 0)'}, //隐藏线
    label: {show: false}, // 隐藏文字
    smooth:true, // 曲线
    data: series[0]// [320, 332, 301, 334, 390, 330, 320]
},

完整示例

loadHistory()
function loadHistory(){
	var xAxisData = []
	var series = [[],[]]
	// 生成数据
	for(var i = 1; i <= 30; i++){
		xAxisData.push(i<10?"0"+i:i)
		series[0].push(Math.floor(Math.random()*150))
		series[1].push(Math.floor(Math.random()*150))
	}
	
	// 数据总和
	loadhe()
	function loadhe(){
		var cement = 0, beton = 0;
		series[0].forEach(function(item){cement+=Number(item)})
		series[1].forEach(function(item){beton+=Number(item)})
		$(".h_he").html("")
		function row(name,num){
			num = num.toString().replace(/(?=(\B)(\d{3})+$)/g,',')
			var div = document.createElement("div")
			div.className = "h_row"
			div.innerHTML = '<span class="justify">'+ name +'</span>累计:'+ num + ' (万吨)'
			return div
		}
		$(".h_he").append(row("水泥",cement))
		$(".h_he").append(row("混凝土",beton))
	}
	return loadCharts()
	function loadCharts(){
		var ele = document.querySelector("#canvas_history")
		var myChart = echarts.init(ele);
		var option = {
			title:{
				text:"历史数据",
				textStyle:{
					fontSize:20
				},
				left:10,
				top:10
			},
			tooltip: { // 鼠标hover 弹窗
				show:true,
		        trigger: 'axis',
		        formatter: function(par){
		        	var strArr = []
		        	par.forEach(function(item,index){
		        		strArr.push(item.seriesName)
		        		strArr.push(item.value)
		        		strArr.push('万吨')
		        		if(par.length-1 > index) strArr.push('<br\>')
		        	})
		        	return strArr.join("")
		        }
		    },
			legend:{
				orient: 'vertical', 
				right:10,
				top:60,
				icon:"pin",
			},
			grid: {
		        top: 110,
		        left: 40,
		        right: 40,
		        bottom: 40
		    },
			color:['rgb(168,218,254)','rgb(254,228,207)'],
			xAxis: [
		        {
		            type: 'category',
		            boundaryGap: false,
		            data: xAxisData,
		            axisTick: {show: false}, // 刻度
		            axisLine: {show: false}, // 轴线
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value',
		            axisTick: {show: false}, // 刻度
		            axisLine: {show: false}, // 轴线
		            splitLine: {show: false},
		        }
		    ],
		    series: [
		        {
		            name: '水泥',
		            z:2, // 显示层级
		            type: 'line',
		            symbol: "none", //去除小圆点
		            //stack: '总量', //数据高度叠加
		            areaStyle: {},
		            lineStyle: {width: 0,color: 'rgba(0, 0, 0, 0)'},
		            label: {show: false},
		            smooth:true, // 曲线
		            data: series[0]// [320, 332, 301, 334, 390, 330, 320]
		        },
		        {	
		        	z:1,
		            name: '混凝土',
		            type: 'line',
		            symbol: "none",
		            //stack: '总量',
		            lineStyle: {width: 0},
		            smooth:true,
		            label: {show: false},
		            areaStyle: {},
		            data: series[1]//[820, 932, 901, 934, 1290, 1330, 1320]
		        }
		    ]
		}
		myChart.setOption(option);
		return myChart
	}
}
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值