效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200604110748792.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ0ODYyMw==,size_16,color_FFFFFF,t_70)
隐藏线点文字 曲线
{
name: '水泥',
z:2,
type: 'line',
symbol: "none",
areaStyle: {},
lineStyle: {width: 0,color: 'rgba(0, 0, 0, 0)'},
label: {show: false},
smooth:true,
data: series[0]
},
完整示例
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: {
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",
areaStyle: {},
lineStyle: {width: 0,color: 'rgba(0, 0, 0, 0)'},
label: {show: false},
smooth:true,
data: series[0]
},
{
z:1,
name: '混凝土',
type: 'line',
symbol: "none",
lineStyle: {width: 0},
smooth:true,
label: {show: false},
areaStyle: {},
data: series[1]
}
]
}
myChart.setOption(option);
return myChart
}
}