var option = {
// 主要用来控制图表四周留白
grid: {
left: '15%',
top: '20%',
right: '5%'
},
// 提示框组件
tooltip: {
trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
axisPointer: { //去掉移动的指示线
type: 'none'
},
extraCssText:'background:#000;opacity:0.65;'
},
formatter: function (params: any) {
var res= `
`
return res;
},
//直角坐标系 grid 中的 x 轴，
xAxis: {
type: 'category', //'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
// 坐标轴轴线相关设置
// 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置
axisLabel: {
// 是否显示坐标刻度标签(这了指是否显示x轴上的月份)
show: true,
// 标签文字的颜色
color: '#999'
},
//x轴刻度线设置
axisTick: {
"show": false
},
// 类目数据，在类目轴（type: 'category'）中有效。
data: getDate.value,
},
//直角坐标系 grid 中的 y 轴，
yAxis: {
type: 'value', //'value' 数值轴，适用于连续数据。
// 坐标轴轴线相关设置
axisLine: {
show: false //y轴线消失
},
splitLine: {
//网格线
lineStyle: {
type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
width: 1,
},
show: true, //隐藏或显示
},
// 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置
axisLabel: {
show: true,
// 标签文字的颜色
color: '#999'
},
//y轴刻度线设置
axisTick: {
"show": false
},
splitNumber: 5, //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整.在类目轴中无效。
},
series: [{
type: 'line', //折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。和全局设置type效果一样,表示折线图
// 系列中的数据内容数组。数组项通常为具体的数据项。
data: getData.value,
// 折线条的样式
lineStyle: {
color: '#E60012',
width: 1
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: ' #ffb3b3'
},
{
offset: 1,
color: '#ffffff'
}
])
},
// stack: 'Total',
label: {
show: true,
position: 'top',
color: '#E60012'
},
// 折线拐点的样式
itemStyle: {
normal: { // 静止时：
color: '#E60012',
},
emphasis: { // 鼠标经过时：
color: '#E60012',
}
},
smooth:true,
symbolSize: 7 //关键内容，间隔显示
}]
};
nextTick(()=>{
var chartDom2 = document.getElementById("chartColumn2") as HTMLElement;
var myChart2 = echarts.init(chartDom2);
option && myChart2.setOption(option);
})
})
